Vue3（二） - 掘金

拉开序幕的setup

理解：Vue3.0中的一个新的配置项，值为一个函数

2.setup是所有Composition API ‘表演的舞台’

组件中所用到的：数据，方法等，均要配置在setup中

4.setup函数有2种返回值：

1：返回一个对象，则对象中的属性，方法都可以在模板中使用`（重点）`，

2：返回一个渲染函数，自定义渲染内容

5.注意点：

1：尽量不要Vue2.0配置混用

2：setup不能是一个async函数

ref函数

1.作用: 定义一个数据的响应式

2. 语法: const xxx = ref(initValue)

   创建一个包含响应式数据的引用(reference)对象
   
   js中操作数据: xxx.value
   
   模板中操作数据: 不需要.value
   
3.一般用来定义一个基本类型的响应式数据

reactive函数

 1.作用: 定义多个数据的响应式
 
2.const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象

3.响应式转换是“深层的”：会影响对象内部所有嵌套的属性

4.内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据都是响应式的

Vue2.0和Vue3.0响应式原理

Vue2.0的响应式

实现原理：

对象类型：通过Object.defineProperty对属性读取，修改进行拦截，数据劫持

数组类型：重写数组的一些方法进行拦截

Object.defineProperty(data,'count',{
  get(){}
  set(){}
})

存在问题：

新增，删除属性界面不会更新

解决办法 this.$set(obj,'a','1') 和this.$delete(obj,'a')

直接通过数组下标修改数组数据，界面不会更新

Vue3.0的响应式

const person = {
   name:'yoga'
   age:18
}

const p = new Proxy(person,{
   读取
   get(target,propName){ 
    return Reflect.get(target,propName)
   }
   新增 修改
   set(target,propName，value){
    Reflect.set(target,propName,value)
   }
   删除
   deleteProperty(target,propName){
    return Reflect.deleteProperty(target,propName)
   }
})

配合Reflect实现响应式，Reflect反射对象的意思，有Object上的方法

Setup注意点

1，setup执行的时机：

在beforeCreate之前执行一次，this是unddfined

2, setup的参数

props:值为对象，包含组件外包传递过来，并且组件内部声明接收的属性

context：上下文对象:
      
         attrs:值为对象，组件外部传递，但是组件内部props配置中没有声明的
         
         slots：收到的插槽内容
         
         emit:分发自定义事件的函数，相当于Vue2.0中的this.$emit