• Vue2和Vue3的响应式原理及区别

    响应式数据的声明。以下内容帮助理解，不建议死记硬背

    1、在Vue2中，只要是在data里面定义的数据，就能在模板中使用，且它是一个响应式数据。数据进行修改，模板就会进行修改。但是其不能监听到深层对象数据和数组数据的更改。Vue2是通过this.$set和this.$delete两个api去解决的

    比如this.$set(this.person,“sex”,“女”)是给person对象添加一个sex为女的响应式属性

    this.$delete(this.person,name)是动态的删除person对象的name属性

    2、Vue2的双向数据绑定是利用了es5 的一个API Object.definepropert() 对数据进行劫持 结合发布订阅模式来实现的。Vue3中使用了es6的proxy对数据进行处理。

    3、在Vue3中，ref函数常用于将简单数据类型定义为响应式数据。relactive函数常用于声明复杂数据类型为响应式

    reactive函数里面写了具体对proxy的实现

    ref处理基本数据类型，底层用的是objectdefineproperty，用的是getter和setter，但是处理对象数据其底层还是求助了reactive 。是通过proxy来实现的

    ref既可以声明简单数据类型也可以声明复杂数据类型，relative只能声明复杂数据类型

    4、取值：在setup里面再次获ref声明的数据的值时，需要.value；在模板中使用ref声明的响应式数据，可以省略.value（因为模板在解析的时候会判断，数据是否是ref声明的数据，如果是，会直接取出里面value的值）

    5、Vue3下响应式原理如下

    其底层对数据的增删改查是通过Proxy和Reflect去处理的（代理和反射）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <script>
    11.        let person = {
    12.             name:'张三',
    13.             age:18
    14.         }
    15.         const p = new Proxy(person,{
    16.             //读取的对象和属性
    17.             get(target,propName){
    18.                 console.log(`有人读取了p身上的${propName}属性`);
    19.                 //Reflect(反射)读取对象身上的属性
    20.                 return Reflect.get(target,propName);
    21.             },
    22.             //修改或新增的对象，修改或新增的属性，修改或新增后的值
    23.             set(target,propName,value){
    24.                 //下面的p即为target
    25.                 console.log(`有人修改了p身上的${propName}属性`);
    26.                 //修改和新增对象身上的属性
    27.                 return Reflect.set(target,propName,value);
    28.             },
    29.             //删除的对象和属性
    30.             deleteProperty(target,propName){
    31.                 console.log(`有人删除了p身上的${propName}属性`);
    32.                 //删除对象身上的属性
    33.                 return Reflect.deleteProperty(target,propName);
    34.             }
    35.         })
    36.     script>
    37. body>
    38. html>

     运行上面的代码，就可以在浏览器的控制台进行验证

  • 相关阅读:
    matlab遗传算法工具箱安装
    【CSS应用篇】——CSS如何实现渐变背景
    Nginx实现tcp代理并支持TLS加密实验
    5 分钟教你搭建「视频动作分类」系统
    云平台下ESB产品开发步骤说明
    微服务项目使用RabbitMQ
    linux用sqlcipher加解密
    如何共享 Android 不同模块的构建配置
    用于大规模 MIMO 检测的近似消息传递 （AMP）（Matlab代码实现）
    高校宿舍系统
  • 原文地址：https://blog.csdn.net/m0_45219210/article/details/127687632