Vue3

《关于Vue3中setup》

 

 正如上面所说：在Vue3中数据，方法等都要配置在setup这个配置项中，

即:不在写data(){},methods(){},computed(){}这些配置项了;

在setup(){}中，可以在写.js文件一样方便，如：

 模板中要用的数据等，都要return出去

setup（）在beforeCreate()之前就被调用；

《关于setup的两个参数》

setup（props，context）{}

 

 

 输出一下props这个参数就有如上图，在这个proxy中有我从其他组件传入的值（value1，value2）

这就说明了：传入的值也是响应式的

 

 

 再输出一下这个context,其身上有attrs,emit，slots

attrs能够得到从父组件传过来，但是没有用props配置项声明接受的数据

emit以后用就是context.emit()了

补充一下：setup(){}中的this为undefined

 

《关于Vue3中响应式》

在Vue2中一切数据vue都给你做的响应式，但在Vue3中为了轻便要响应式的数据要你自己配置

《响应式基本数据用ref函数》

 我们要通过ref函数来指定要响应式的数据

通过输出ref('张三')：

我们要用的值在这个引用实例对象RemImpl.value上

getter,setter在原型对象上了

如果要改变其值：这里是name.value="newname";

《响应对象（数组等）数据用reactive函数》

改变数据的话，直接：school.name=“newname”

对于数组：person[1]='...',可以直接用下标改变了

输出school是：

 

 

 《Vue3响应式原理》

target是p这个映射对象，propName是修改的数据是哪一个

 

 这个p是映射对象，通过Proxy来new出来的对象，对person这个真实来进行管理：

 

 

 

 

 

《ref与reactive的总结》

 

 

一般都是用reactive来写：

 《计算属性computed的变化》

 如图:computed要通过引用，然后在才能在setup（）中使用，在computed()这个括号里面传入（）=>{}或function(){}

函数，其他跟vue2相同，我上面的是简写形式，还有运用于计算属性会改变的情况的全写

《监视属性watch的变化》

首先也要来一句引入

 

watch(第一个参数，第二个参数，第三个参数)

第一个参数是：要监视

对象

第二个参数是：回调函数，函数可以接受到所监视对象的新的值，旧的值

第三个参数是：一个对象{}，里面配置以前Vue2中的如immediate,deep等配置项

《监视的原理》

其实他监视是看我们监视的对象的地址变不变

《watchEffect函数》

Vue3中新的函数

首先import {watchEffect} from 'vue'

写法：watch(()=>{

//没有newValue与oldValue与immediate,deep配置项（因为都已经帮你开好了）

})

 

 《生命周期》

 

 

 

 

 

 

 

 《自定义hook》

 

 首先这个hook函数，是写在名为hooks的文件夹下：其实其就是实现代码复用的

 

 

 命名一般以use开头，以便区分

引入写的函数

 

 

 使用函数

 

 函数中的内容

《toRef》

其主要是为了简化模板中总是person.name,person.age,这种后面加点的情况

首先要引入import {toRef} from 'vue'

 

toRef(参数1，参数2)：第一个参数是要将哪一个收响应式的数据，第二个参数是这个响应式数据中的哪一个key

转化为ref实例对象

然后就可以在模板中直接写name,不用总是‘.’了