Vue3-2-setup概述

methods: {

showMsg2(){

  console.log('methods中的showmsg2')

}

}

}

/*

• setup执行了 undefined // 先执行setup 因为还未初始化完，所以this未定义

• beforeCreate执行了 // 创建el完成后执行回调beforeCreate

• Proxy {showMsg2: ƒ, …} // 父子组件渲染完成后执行回调

*/

3.  setup的参数



setup(props, context) / setup(props, {attrs, slots, emit})



*   props: 包含props配置声明且传入了的所有属性的对象

*   attrs: 包含没有在props配置中声明的属性的对象, 相当于 this.$attrs

*   slots: 包含所有传入的插槽内容的对象, 相当于 this.$slots

*   emit: 用来分发自定义事件的函数, 相当于 this.$emit

*   App.vue

测试文件

{{msg}}

---

<Child :msg=“msg” msg2=“context.attrs中测试文字” @X=“X”>

*   Child.vue

{{msg}}

[]( )ref

----------------------------------------------------------------------



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

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

3.  返回的是一个ref对象，对象中value属性，如果需要对数据操作，通过ref对象调用value属性方式进行操作

4.  操作数据: xxx.value

5.  HTML模板中操作数据: 不需要.value

6.  一般用来定义一个基本类型的响应式数据

{{str}}

{{count}}

[]( )reactive

---------------------------------------------------------------------------



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

2.  const proxy = reactive(obj): 接收一个普通对象然后返回该普通对象的响应式代理器对象

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

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

{{user}}

[]( )vue2与vue3响应式区别

=================================================================================



[]( )vue2的响应式

---------------------------------------------------------------------------



1.  对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)



*   问题：对象直接新添加的属性或删除已有属性, 界面不会自动更新，比如表单都是通过v-model双向绑定data里面的数据然后修改数据的



2.  数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持



*   问题： 直接通过下标替换元素或更新length, 界面不会自动更新 arr\[1\] = {}

Object.defineProperty(data, ‘count’, {

get () {}, 

set () {}

})

[]( )Vue3的响应式

---------------------------------------------------------------------------



1.  通过Proxy(代理): 拦截对data任意属性的任意(13种)操作, 包括属性值的读写, 属性的添加, 属性的删除等



*   handler: 包含捕捉器（trap）的占位符对象，可译为处理器对象，也就是用来监视数据变化

*   traps提供属性访问的方法。这类似于操作系统中捕获器的概念

*   target被 Proxy 代理虚拟化的对象。它常被作为代理的存储后端,也就是目标对象



2.  通过 Reflect(反射): 动态对被代理对象的相应属性进行特定的操作

3.  Vue3的响应是深度式的响应