Vue3入门级别笔记-适用于入门

前言:Vue3快速上手
1.Vue3简介

  • 2020年9月18日,发布Vue.js3.0版本,代号:One Plece(海贼王)

2.Vue3带来了什么

性能升级

  • 打包大小减少41%,
  • 初次渲染快55%,更新渲染快133%
  • 内存减少45% …

源码升级

  • 使用Proxy代替defineProperty实现响应式
  • 重写虚拟DOM的实现和Tree-Shaking

拥抱TypeScript

  • Vue3可以更好的支持TypeScript

新的特性

  • Composition API(组合API):setup配置、ref与reactive、watch与watchEffect、provide与inject…
  • 新的内置组件:Fragment、Teleport、Suspense
  • 其它改变:新的生命周期钩子、data选项应始终被声明为一个函数、溢出keyCode支持作为v-on的修饰符…

一、创建Vue3.0工程(两种方式)
1.使用vue-cli创建,要求vue-cli版本高于4.5.0
官方文档:
2.使用vite创建(没用webpack,现在不常用)
vite官网:https://vitejs.cn/
什么是vite? ——新一代前端构建工具(原有的是webpack)
优势:开发环境中,无需打包操作,可快速的冷启动、轻量快速的热承载、真正的按需编译(不多做了解)
ps:优化的启动速度与工程修改之后渲染速度

分析工程结构
src——main.js文件

/引入的不再是Vue构造函数了,引入的是一个名为createApp的工厂函数,vue2中没有/
import { createApp } from './vue'
import App from './App.vue'

// 创建应用实例对象app——类似vue2中的vm,但app更轻
const app = createApp(App)
app.mount('#app')  // 挂载

/* vue2写法
const vm = new Vue({
  render:h => h(App)
})
vm.$mount('#app')
*/

src——App.vue

<script>
import HelloWorld from './components/HelloWorld.vue

export default {}
script>

二、常用Composition API(组合式API)

1.拉开序幕的setup(初识setup)
1.理解:Vue.3中一个新的配置项,职位一个函数。
2.setup是所有Composition API(组合API)“表演舞台”
3.组件中所有用到的:数据、方法等,均要配置在setup中
4.setup函数的两种返回值:①若返回一个对象,则对象中的属性、方法,在模板中均可以直接使用(重点)②若返回一个渲染函数:则可以自定义渲染内容。
5.注意点:尽量不要与Vue2.x配置混用(Vue2.x配置中可以访问到setup中的属性、方法;但是setup中不能访问到Vue2.x配置;如果有重名setup优先);setup不能是一个async函数,因为返回值不再是return的对象,而是promise,模板看不到return中的属性

2.ref函数(引用实现对象)
_处理基本函数类型,用ref声明之后变量成为【RefImpl】的实例对象

<template>
  <h1>{{name - age}}h1>
template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup() {
    / 里面其实兼容vue2的方法,但是不推荐,会有问题例如vue2可以读取3中的数据与方法,但是3中不能读取2的 /
    let name = ref('张三')
    let age = ref(18)

    function changInfo(
      console.log(name, age) //控制台输出的是一个对象RefImpl{}, 即引用对象 (RefImpl引用实现缩写)
      // 所以修改数据的时候需要取.value,即name.value/age.value
    ) // 方法
    return { name, age, changInfo } // 返回一个对象(常用)
  }
}
script>

_处理基本对象类型

<template>
  <h1>{{name - age}}h1>
  <p>job p>
template>

<script>
import { ref } from 'vue'

export default {
  name: 'App',
  setup() {
    // 数据
    let name = ref('张三')
    let age = ref(18)
    let job = ref({
      type: 'web前端',
      salary: '30k'
    })

    function changInfo(
      console.log(job) //控制台输出的是一个Proxy{}代理对象, Vue3对不同数据类型不同处理方式
      //处理job时,应该用job.value.type/job.value.salary
    ) // 方法
    return { name, age, changInfo } // 返回一个对象(常用)
  }
}
script>

总结
ref函数作用:定义一个响应式数据
语法:const xxx = ref(initValue)创建一个包含响应式数据的引用对象(reference对象);JS中操作数据:‘xxx.value’;模板中读取数据不需要.value,直接

{{xxx}}

3.reactive函数

  • 作用:定义一个对象类型的响应式数据(基本类型不要用它,要用ref函数)
  • 语法:const 代理对象 = reactive(源对象)接收一个对象(或数组),返回一个代理对象(Proxy的实例对象,简称proxy对象)
  • reactive定义的响应式数据是“深层次的”
  • 内部基于ES6的Proxy实现,通过代理对象操作源对象内部数据进行操作

4.Vue3.0中的响应式原理
要想实现数据的响应式,必须捕获到数据的修改

  • 回顾vue2.x的响应式
    实现原理:对象类型:通过Object.defineProperty()对属性的读取、修改进行拦截(数据劫持)。
    数组类型:通过重写更新数组的一系列方法来实现拦截。(对数组的变更方法进行了包裹)
Object.defineProperty(data, 'count', {
  get() {},
  set() {}
})

存在问题:①新增属性、删除属性,界面不会更新;②直接通过下标修改数组,界面不会自动更新

// vue2.0添加属性有两种方式
this.$set('对象', '添加的属性', '属性值')
Vue.set('对象', '添加的属性', '属性值')
// vue2.0删除属性
this.$delete('对象', '添加的属性', '属性值')
Vue.delete('对象', '添加的属性', '属性值')
  • Vue3.0的响应式
    实现原理:通过Proxy(代理):拦截对象中任意属性的变化,包括属性值的读写,属性的添加,属性的删除等,通过Reflect(反射)对源代理对象的属性进行操作。
    MDN文档中描述的Proxy与Reflect
// 源数据
let person = {
  name: '张三',
  age: 18
}
// 模拟Vue3中时间响应式, Proxy代理
const p = new Proxy(person, {
  get(target, propName) {
    console.log('要想实现数据的响应式,必须捕获到数据的修改,有人读取时调用')
    // 没有写return返回undefined
    // return XXX
    return target[propName]
  },
  set(target, propName, value) {
    console.log('要想实现数据的响应式,必须捕获到数据的修改,有人新增与修改时调用')
    // 没有写return返回undefined
    return target[propName] = value
  },
  deleteProperty(target, propName) { // 有人新增与修改时调用
    return delete target[propName]
  }
})
// p.name调用get(), p.name = 'XX'调用set(){}

上面操作直接修改的是person源数据,但是vue3底层并不单单是这样写的,下面就引出了reflect

  • reflect
    反射,可以看做替代Object,比Object更高级,说的不准确可以这样记,
    那你肯定要问为什么不直接用Object呢?原因之一是因为Object重复定义重名的时候会报错,reflect不会报错,会直接不执行
//所以结合上面,我们总结vue3中大概的思路如下代码
let person = {
  name: '张三',
  age: 18
}

const p = new Proxy(person, {
  get(target, propName) {
    return Reflect.get(target, propName)
  },
  set(target, propName, value) {
    return Reflect.set(target, propName, value)
  },
  deleteProperty(target, propName) {
    return Reflect.deleteProperty(target, propName)
  }
})

5.reactive对比ref

  • 从定义数据角度对此
    ref用来定义基本类型数据,reactive用来定义对象(或数据)类型数据。
    注:ref也可以用来定义对象(或数组)类型数据,它内部会自动通过reactive转为代理对象。

6.setUp注意点

  • setUp执行的时机
    在beforeCreate之前执行一次,this是undefined。

  • setUp的参数
    props:值为对象,包含:组件外部传递过来,且主组件内部声明接收了的属性
    context:上下文对象

    • attrs:值为对象,包含:组件外部传递过来,但没有在props配置中声明的属性,相当于this.$attrs
    • slots:收到插槽内容相当于this.$slots
    • emit:分发自定义事件的函数,相当于this.$emit
setUp(props, context) {
}

你可能感兴趣的:(Vue知识点集合,javascript,webpack,前端)