devbox
我家小花儿
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

vue3中的响应式原理_vue3响应式原理

作者：我家小花儿 | 2024-03-22 00:32:04

赞

踩

vue3响应式原理

在讲vue3的响应式之前，先简单说一下vue2的响应式原理。

对象类型：通过Object.defineProperty()对属性的读取丶修改进行拦截（数据劫持）

数组类型：通过重写更新数组的一系列方法来实现拦截。

vue2的响应式会存在下列的问题：

1.新增属性，或者删除属性，界面不会更新

2.直接通过下标修改数组，界面不会自动更新

我们来验证一下：

点击按钮的时候往对象里面添加年龄属性，这时候我们看到浏览器的控制台已经打印出了obj.sex为女。说明我们已经往obj对象上面添加了属性。但是页面上并没有发生改变。原因是vue监测不到。

  1. <template>
  2.     <div>
  3.         <div>
  4.             <h1>姓名：{{obj.name}}</h1>
  5.             <h1>年龄：{{obj.age}}</h1>
  6.             <h1 v-if="obj.sex">性别：{{obj.sex}}</h1>
  7.         </div>
  8.         <div>
  9.             <button @click="addSex">点击添加性别</button>
  10.         </div>
  11.     </div>
  12. </template>
  13.  
  14. <script>
  15.     export default {
  16.         data(){
  17.             return {
  18.                 obj:{
  19.                     name:'孙悟空',
  20.                     age:'99',
  21.                 }
  22.             }
  23.         },
  24.         methods:{
  25.             addSex(){
  26.                 console.log(this.obj.sex)
  27.                 this.obj.sex = '女'
  28.                 console.log(this.obj.sex)
  29.             }
  30.         }
  31.     }
  32. </script>
  33.  
  34. <style scoped>
  35.  
  36. </style>

 解决办法：利用$set

代码：

  1. <template>
  2.     <div>
  3.         <div>
  4.             <h1>姓名：{{obj.name}}</h1>
  5.             <h1>年龄：{{obj.age}}</h1>
  6.             <h1 v-if="obj.sex">性别：{{obj.sex}}</h1>
  7.         </div>
  8.         <div>
  9.             <button @click="addSex">点击添加性别</button>
  10.         </div>
  11.     </div>
  12. </template>
  13.  
  14. <script>
  15.     export default {
  16.         data(){
  17.             return {
  18.                 obj:{
  19.                     name:'孙悟空',
  20.                     age:'99',
  21.                 }
  22.             }
  23.         },
  24.         methods:{
  25.             addSex(){
  26.                 console.log(this.obj.sex)
  27.                 this.$set(this.obj,'sex','女')
  28.                 console.log(this.obj.sex)
  29.             }
  30.         }
  31.     }
  32. </script>
  33.  
  34. <style scoped>
  35.  
  36. </style>

效果图：

 再次添加一个按钮，点击删除obj下面的name属性。可以看到，页面上面依旧没有发生变化。

代码：

  1. <template>
  2.     <div>
  3.         <div>
  4.             <h1>姓名：{{obj.name}}</h1>
  5.             <h1>年龄：{{obj.age}}</h1>
  6.             <h1 v-if="obj.sex">性别：{{obj.sex}}</h1>
  7.         </div>
  8.         <div>
  9.             <button @click="addSex">点击添加性别</button>
  10.         </div>
  11.         <br>
  12.         <div>
  13.             <button @click="delAge">点击删除年龄</button>
  14.         </div>
  15.     </div>
  16. </template>
  17.  
  18. <script>
  19.     export default {
  20.         data(){
  21.             return {
  22.                 obj:{
  23.                     name:'孙悟空',
  24.                     age:'99',
  25.                 }
  26.             }
  27.         },
  28.         methods:{
  29.             addSex(){
  30.                 console.log(this.obj.sex)
  31.                 this.$set(this.obj,'sex','女')
  32.                 console.log(this.obj.sex)
  33.             },
  34.             delAge(){
  35.                 console.log(this.obj.age)
  36.                 delete this.obj.age
  37.                 console.log(this.obj.age)
  38.             }
  39.         }
  40.     }
  41. </script>
  42.  
  43. <style scoped>
  44.  
  45. </style>

效果图：

解决办法：利用$delete

代码：

  1. <template>
  2.     <div>
  3.         <div>
  4.             <h1>姓名：{{obj.name}}</h1>
  5.             <h1 v-if="obj.age">年龄：{{obj.age}}</h1>
  6.             <h1 v-if="obj.sex">性别：{{obj.sex}}</h1>
  7.         </div>
  8.         <div>
  9.             <button @click="addSex">点击添加性别</button>
  10.         </div>
  11.         <br>
  12.         <div>
  13.             <button @click="delAge">点击删除年龄</button>
  14.         </div>
  15.     </div>
  16. </template>
  17.  
  18. <script>
  19.     export default {
  20.         data(){
  21.             return {
  22.                 obj:{
  23.                     name:'孙悟空',
  24.                     age:'99',
  25.                 }
  26.             }
  27.         },
  28.         methods:{
  29.             addSex(){
  30.                 console.log(this.obj.sex)
  31.                 this.$set(this.obj,'sex','女')
  32.                 console.log(this.obj.sex)
  33.             },
  34.             delAge(){
  35.                 console.log(this.obj.age)
  36.                 this.$delete(this.obj,'age')
  37.                 console.log(this.obj.age)
  38.             }
  39.         }
  40.     }
  41. </script>
  42.  
  43. <style scoped>
  44.  
  45. </style>

效果图：

接下来说一下数组。如果要改变数组里面的值。利用索引是没有效果的。页面不会发生改变。

代码：

  1. <template>
  2.     <div>
  3.         <div>
  4.             <h1>姓名：{{obj.name}}</h1>
  5.             <h1 v-if="obj.age">年龄：{{obj.age}}</h1>
  6.             <h1 v-if="obj.sex">性别：{{obj.sex}}</h1>
  7.             <h1>爱好：{{obj.hobby}}</h1>
  8.         </div>
  9.         <div>
  10.             <button @click="addSex">点击添加性别</button>
  11.         </div>
  12.         <br>
  13.         <div>
  14.             <button @click="delAge">点击删除年龄</button>
  15.         </div>
  16.         <br>
  17.         <div>
  18.             <button @click="updateHobby">点击修改爱好</button>
  19.         </div>
  20.     </div>
  21. </template>
  22.  
  23. <script>
  24.     export default {
  25.         data(){
  26.             return {
  27.                 obj:{
  28.                     name:'孙悟空',
  29.                     age:'99',
  30.                     hobby:['抽烟','烫头'],
  31.                 }
  32.             }
  33.         },
  34.         methods:{
  35.             addSex(){
  36.                 console.log(this.obj.sex)
  37.                 this.$set(this.obj,'sex','女')
  38.                 console.log(this.obj.sex)
  39.             },
  40.             delAge(){
  41.                 console.log(this.obj.age)
  42.                 this.$delete(this.obj,'age')
  43.                 console.log(this.obj.age)
  44.             },
  45.             updateHobby(){
  46.                 console.log(this.obj.hobby);
  47.                 this.obj.hobby[0] = '打妖怪'
  48.                 console.log(this.obj.hobby);
  49.             }
  50.         }
  51.     }
  52. </script>
  53.  
  54. <style scoped>
  55.  
  56. </style>

 效果图：

 解决办法有两种：

1.$set()

2.splice()

代码：

  1. <template>
  2.     <div>
  3.         <div>
  4.             <h1>姓名：{{obj.name}}</h1>
  5.             <h1 v-if="obj.age">年龄：{{obj.age}}</h1>
  6.             <h1 v-if="obj.sex">性别：{{obj.sex}}</h1>
  7.             <h1>爱好：{{obj.hobby}}</h1>
  8.         </div>
  9.         <div>
  10.             <button @click="addSex">点击添加性别</button>
  11.         </div>
  12.         <br>
  13.         <div>
  14.             <button @click="delAge">点击删除年龄</button>
  15.         </div>
  16.         <br>
  17.         <div>
  18.             <button @click="updateHobby">点击修改爱好</button>
  19.         </div>
  20.     </div>
  21. </template>
  22.  
  23. <script>
  24.     export default {
  25.         data(){
  26.             return {
  27.                 obj:{
  28.                     name:'孙悟空',
  29.                     age:'99',
  30.                     hobby:['抽烟','烫头'],
  31.                 }
  32.             }
  33.         },
  34.         methods:{
  35.             addSex(){
  36.                 console.log(this.obj.sex)
  37.                 this.$set(this.obj,'sex','女')
  38.                 console.log(this.obj.sex)
  39.             },
  40.             delAge(){
  41.                 console.log(this.obj.age)
  42.                 this.$delete(this.obj,'age')
  43.                 console.log(this.obj.age)
  44.             },
  45.             updateHobby(){
  46.                 console.log(this.obj.hobby);
  47.                 // this.obj.hobby[0] = '打妖怪'
  48.                 // this.$set(this.obj.hobby,0,'打妖怪')
  49.                 this.obj.hobby.splice(0,1,'打妖怪')
  50.                 console.log(this.obj.hobby);
  51.             }
  52.         }
  53.     }
  54. </script>
  55.  
  56. <style scoped>
  57.  
  58. </style>

效果图：

以上就是vue2响应式原理，以及一些问题的解决方案。

接下来我们来说一下vue3的写法

安装最新版本脚手架：

npm install -g @vue/cil

这里简单介绍一下setup.

1.它是vue3.0中的一个新配置，值为一个函数

2.组件里面用到的数据，方法，都配置在setup中。（就是data和methods）

3.setup函数有两种返回值。若返回一个对象则对象中的属性，方法，在模板中都可以直接使用。还有一种，返回一个渲染函数，则可以自定义渲染内容。

代码：

  1. <template>
  2.     <div class="hello">
  3.         
  4.     </div>
  5. </template>
  6.  
  7. <script>
  8.     import {h} from  'vue'
  9.     export default {
  10.         name: 'HelloWorld',
  11.         setup() {
  12.  
  13.             return ()=> h('h1','我是vue3')
  14.            
  15.         },
  16.         props: {
  17.             msg: String
  18.         }
  19.     }
  20. </script>
  21.  
  22. <!-- Add "scoped" attribute to limit CSS to this component only -->
  23. <style scoped>
  24.  
  25. </style>

效果图：

4.使用setup的时候，有以下几点需要注意：

  • 不要与vue2的配置混用。如果混用，在vue2的data，methods中可以访问到setup中的属性，方法。但是在setup里面不能访问到vue里面的配置。如果vue2和vue3的配置有重名，setup里面的配置优先。
  • setup不能是一个async函数，因为返回值不再是return的对象，而是一个promise，模板看不到return对象中的属性。

一样是添加两个按钮，分别是添加性别和删除年龄以及修改爱好。在vue3中直接obj.sex和delete obj.age以及数组的索引就可以对obj这个对象进行添加，修改以及删除，并且更新到页面上。这都得益于reactive。

代码：

  1. <template>
  2.     <div class="hello">
  3.         <div>
  4.             <h1>姓名：{{obj.name}}</h1>
  5.             <h1 v-if="obj.age">年龄：{{obj.age}}</h1>
  6.             <h1 v-if="obj.sex">性别：{{obj.sex}}</h1>
  7.         </div>
  8.         <div>
  9.             <button @click="addSex">点击添加性别</button>
  10.         </div>
  11.         <br>
  12.         <div>
  13.             <button @click="delAge">点击删除年龄</button>
  14.         </div>
  15.     </div>
  16. </template>
  17.  
  18. <script>
  19.     import {reactive} from  'vue'
  20.     export default {
  21.         name: 'HelloWorld',
  22.         setup() {
  23.             let obj = reactive({
  24.                 name:'孙悟空',
  25.                 age:99,
  26.             })
  27.  
  28.             function addSex() {
  29.                 obj.sex = '男'
  30.                 console.log('我添加了sex');
  31.                 console.log(obj.sex)
  32.             }
  33.  
  34.             function delAge() {
  35.                 delete obj.age
  36.                 console.log('我删除了年龄');
  37.                 console.log(obj.age)
  38.             }
  39.  
  40.             return {
  41.                 obj,
  42.                 addSex,
  43.                 delAge
  44.             }
  45.         },
  46.         props: {
  47.             msg: String
  48.         }
  49.     }
  50. </script>
  51.  
  52. <!-- Add "scoped" attribute to limit CSS to this component only -->
  53. <style scoped>
  54.  
  55. </style>

效果图：

 

 

vue3的响应式原理

实现原理：

  • 通过Proxy（代理）：拦截对象中任意属性的变化，包括属性的读写，属性的添加，属性的删除等。
  • 通过Reflect（反射）：对源对象的属性进行操作

先来讲下Proxy的基本用法：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. <script>
  11.     //源数据
  12.     let obj = {
  13.         name:'孙悟空',
  14.         age:100
  15.     }
  16.  
  17.     // 模拟vue3中的响应式
  18.     //Proxy第一个参数是源数据。第二个参数是配置
  19.     const p = new Proxy(obj,{
  20.         // 读取
  21.         get(target,propName){
  22.             console.log(`读取了p的${propName}属性`)
  23.             return target[propName]
  24.         },
  25.         // 修改，新增
  26.         set(target,propName,value){
  27.             console.log(`修改了p的${propName}属性，准备更新界面`)
  28.             return target[propName] = value
  29.         },
  30.         //删除
  31.         deleteProperty(target,propName){
  32.             console.log(`删除了p的${propName}属性，准备更新界面`)
  33.             return delete target[propName]
  34.         }
  35.     })
  36. </script>
  37. </html>

 在讲一下Reflect(反射的意思)，首先定义一个对象obj，obj下面有a，两个属性。一般我们要读取a属性，会用obj.a来实现。其实还有另外一种方式。就是Reflect。Reflect.get(obj,'a')

 vue3实现响应式原理就是利用了Reflect

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8.  
  9. </body>
  10. <script>
  11.     //源数据
  12.     let obj = {
  13.         name:'孙悟空',
  14.         age:100
  15.     }
  16.  
  17.     // 模拟vue3中的响应式
  18.     //Proxy第一个参数是源数据。第二个参数是配置
  19.     const p = new Proxy(obj,{
  20.         // 读取
  21.         get(target,propName){
  22.             console.log(`读取了p的${propName}属性`)
  23.             return Reflect.get(target,propName)
  24.         },
  25.         // 修改，新增
  26.         set(target,propName,value){
  27.             console.log(`修改了p的${propName}属性，准备更新界面`)
  28.             return Reflect.set(target,propName,value)
  29.         },
  30.         //删除
  31.         deleteProperty(target,propName){
  32.             console.log(`删除了p的${propName}属性，准备更新界面`)
  33.             return Reflect.deleteProperty(target,propName)
  34.         }
  35.     })
  36. </script>
  37. </html>

总结一下，vue2实现原理主要依靠Object.defineProperty。而vue3则是引用了Proxy来做代理。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/283907
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号