(尚硅谷)Vue笔记--------30

回顾Vue2的响应式原理

 

写一个简单的例子说明问题。

 

我们现在去添加一个原来person没有的属性或者删除一个属性：

 

 

添加失败。

但是vue2也给我们添加的办法了：

 

 

 

 也可以用引用Vue的方法：

删除也是同理：

 

 

 

页面同样不能渲染，我们还是要去使用$方法：

 

 

 

现在我们去添加点数组：

 

 

现在我们去修改数组中的第一个元素值：

 

 

这样写是无效的，想要成功更改我们还是需要使用$set方法：

 

 

 

我们也可以使用数组方法：

 

Vue3响应式原理_proxy 

我们现在在vue3中也做刚才vue2做过的事情，我们看看在vue3中会出现同样的问题么：

 

 

 

在vue3里我们直接添加，它不会说不更新的。

 

 

 

 

对于对象类型，我们可以随意的增删改查，对数组的操作我们上一次笔记里有，这里不赘述了。

Vue3是使用了Proxy可以进行随意增删改查：

 

vue2中我们就是要使用get和set方法：

 

每一个数据的增删改查都需要进行set和get处理，我们如果数据多起来，就需要进行循环遍历，还是比较麻烦的。

Vue3响应式原理_Reflect 

但是实际上我们的vue3不是像直接找到对象target然后去做的而是使用了Reflect:

我们去总结一下：

 

reactive对比ref 

setup的两个注意点 

我们的vue2中有这样一点：

 

 

 

 

 

我们在外部给组件传的值，如果在组件中使用props中传了，就会加载到vc中，但是没传入props中的就会在$attrs里 。

我们来给我们vue3的代码加上beforeCreate方法：

 

 

由页面可知，setup方法比beforeCreate方法先执行。

我们给setup传入一个this:

 

 

我们setup的this是undefined。

 

 

可以看到我们的setup只有两个参数。

 我们来写个组件，然后在App中引用，然后使用第一个参数props:

 

 

我们的Proxy中没有收到任何东西，获取不到school和msg，因为我们的props写少了：

 

 

我们在组件中定义props的参数值，就可以获取到了。

如果我们在props中传递的参数不存在，值为undefined.

但是如果我们传递的属性不全，也会报警告。

而且可以看到它把我们传来的数据写在了Proxy对象里，可以做响应式。

我们现在去聊聊第二个参数：

context。

我们看看context身上都有什么：

 

 

我们看到了attrs就是之前vue2中的$attrs。还看到了触发自定义事件的emit,还有用于插槽的slots。

我们都去用用：

attrs我们就不需要研究了和vue2中没什么区别，存放外部添加在Demo组件身上但是还没在props中接收的数据。使用的时候调用context.attrs就可以了。

我们现在去使用一下emit自定义事件：

 

 我们vue3中比较烦的是，我们使用自定义函数时，我们在vue2中直接拿来就this.$emit就使用了，我们这里必须用emits属性告诉人们你是用的是哪个自定义函数才行：

 

我们context里最后还有一个slot参数需要测试一下：

 

上面是普通插槽的写法。

我们vue3里的命名插槽写法如下：