【day 07】vue的一些原理性的内容

最新推荐文章于 2024-10-18 17:49:11 发布

菜鸡也会飞

最新推荐文章于 2024-10-18 17:49:11 发布

阅读量1.2k

点赞数

分类专栏： Vue 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/weixin_57858263/article/details/130773924

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章通过示例展示了如何在Vue.js中使用`Object.defineProperty`进行数据绑定，包括创建getter和setter实现对象属性的监控。同时，解释了数据代理的概念，即通过代理对象操作原对象的属性，以实现更便捷的数据读写。文中还提到了Vue实例中_data的数据劫持机制。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     
    </style>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
       new Vue({
           el:"#app",
           data(){
               return{
                   msg:123
               }
           },
           methods: {
          

           }
        
       })

       console.log({name:'zhuque'})

    //    需求：number 变  person内  age也发生变化
    let number = 100
    let person = {
        name:'zhuque',
        // age: number
    }
    // console.log(person)
    // 通过 defineProperty 给 person 添加 age属性
    Object.defineProperty(person,'age',{
        get() {
            console.log('调用了getter');
            return number
        },
    })
//     /**
//      * 观察发现：
//      * 1.age添加成功  且值 （...）
//      * 2.划过去之后显示  调用getter 点击会显示值
//      * 3. get age 的函数
//      * 
//      * age 的值  找getter去要
//      * /
//   
   </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     
    </style>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
        vm=new Vue({
           el:"#app",
           data(){
               return{
                   msg:123
               }
           },
           methods: {
          

           }
        
       })

       console.log({name:'zhuque'})

    //    需求：person内 age 发生变化 number的值也发生变化
    let number = 100
    let person = {
        name:'zhuque',
        // age: number
    }
    // console.log(person)
    // 通过 defineProperty 给 person 添加 age属性
    Object.defineProperty(person,'age',{
        get() {
            console.log('调用了getter');
            return number
        },
        set(newValue){
            console.log('调用了setter');
            number = newValue
        }
    })

    // 数据代理 通过一个对象(obj2)代理  对另一个对象（obj1）中 属性的操作（读写）
    // obj1      obj2
    // x         希望通过  操作  obj2 可以读取 obj1 的 x 修改obj1的x

    // 需求1 obj2.x 能访问到 obj1内的x发生了变化 我也能拿到
    // 需求2 修改obj2.x n能修改到  obj1内的x
    let obj1 = {
        x:100
    }
    let obj2 = {
        // x:obj1.x
    }
    Object.defineProperty(obj2,'x',{
        get() {
            return obj1.x
        },
        set(newValue){
            obj1.x = newValue
        }
    })
  
   </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
     
    </style>
</head>
<body>
    <div id="app">

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
   <script>
    let data = {
        msg:123
    }
      const vm = new Vue({
           el:"#app",
           data
        
       })
    //    通过操作 vm.msg来读写 某个对象内的msg属性（数据代理）
    // vm.msg能 访问 data.msg
    //  vm.msg修改了 data.msg也要对应的修改
    // vm.msg = '修改之后的值'
    // data.msg
    // '修改之后的值'


    // vm为了方便  把data经过处理  放在自己身上了
    // vm._data === data //true  在——data 对象上 做了数据劫持

    // getter 之前（之后） 我绑架你  做事 做完事之后（数据变化  视图更新） 放你正常运行
    // setter 之前（之后） 我绑架你  做事 做完事之后  放你正常运行

    /*总结 
    数据定义在  data:{ msg:123}
    vm实例生成
    vm._data = data 我们在模板内  应该要使用  _data.msg
    所以使用了  数据代理  Object.defineProperty()  给vm添加了 msg属性
    我们就不需要在模板内  _data.msg 去使用   而是   直接使用msg
     目的  就是为了 vm上  读写  data内的属性   更加方便  操作data


    */
   </script>
</body>
</html>