vue笔记

MVVM

     m  模型     是data中的数据
     v  视图     是模板 dom
     vm 视图模型 是vue的实例对象vm (const vm=new vue({}))
     vm通过数据绑定去操作dom  通过dom监听改变数据
     观察发现：
     data中的数据和属性最终会出现在vue实例vm上（数据代理）
     vm身上以及vm的原型对象上的属性都可以用在模板上
     

    <div id="root">
      <h1>hello, {{name}}</h1>
      <h1>测试一下1：{{$options}}</h1>
      <h1>测试一下2：{{_c}}</h1>
      <h1>测试一下3：{{$emit}}</h1>
    </div>
    <script>
      Vue.config.productionTip = false  //阻止启动项目时 报生产环境错误
      const vm = new Vue({
        el: '#root',
        data: {
          name: 'world!',
          url: 'http://www.baidu.com'
        }
      })
      console.log(vm);

输出结果：

打印结果

Object.defineProperty()

普通写法

      let person={
        name:'张三',
        sex:'男',
        age:data
      }
      console.log(person);

还有一点我们自己定义的对象里面的key和value 都是可以更改 删除和遍历的

此时 若想更改age的值 我们会去改变data

发现改不了 这个时候我们可能会这样做

但是我就是不想写中间这个步骤 想要当data改变的时候 age就会跟着改变 就会用到Object.defineProperty()中的高级配置

基础用法(四个基础配置项)

      let person={
        name:'张三',
        sex:'男',
        // age:data
      }
      console.log(person);

      Object.defineProperty(person,'age',{
        value:7
      })

输出结果

发现 也可以实现添加age属性 但是区别在于 用Object.defineProperty()添加的属性是不可以修改和枚举的 此时 Object.defineProperty() 定义属性时的默认值

enumerable:true //控制属性是否可以被枚举

configurable:true //控制属性是否可以被删除

writable:true, //控制属性是否可以被修改 默认false

      let person={
        name:'张三',
        sex:'男',
        // age:data
      }
      console.log(person);

      Object.defineProperty(person,'age',{
        value:7,
        enumerable:true  //控制属性是否可以被枚举
        configurable:true  //控制属性是否可以被删除
        writable:true,  //控制属性是否可以被修改 默认false
      })
      console.log(Object.keys(person));

高级配置项(setter 和 getter)

实现data改变的时候 age就会跟着改变

初识数据代理

        let obj1 = {
          x: 100
        }
        let obj2 = {
          y: 200
        }
        Object.defineProperty(obj2,'x',{
          get(){
            return obj1.x
          },
          set(newValue){
            obj1.x = newValue
          }
        })

        console.log(obj2);
        obj2.x=300
        console.log(obj2.x);

数据代理

vm代理data中的属性

基本原理：

通过Object.defineProperty()把data对象中所有属性添加到vm上 为每一个添加到vm上的属性都指定一个getter和setter 在setter和getter中去操作（读/写）data中的属性

验证getter

vm.name=data.name

验证setter

    <div id="root">
      <!-- 
        vm代理data中的数据 并且把data对象保存在自己的本身是 vm._data
        data=options.data=vm._data
       -->
      名字：{{name}}
    </div>
    <script>
      Vue.config.productionTip = false  //阻止启动项目时 报生产环境错误
      let data = {
          name: 'world!',
          url: 'http://www.baidu.com'
        }
      const vm = new Vue({
        el: '#root',
        // data: {
        //   name: 'world!',
        //   url: 'http://www.baidu.com'
        // }
        // data:{
        //   data
        // }
        data
      })
      console.log(vm);
      console.log(vm._data===data); //true
    </script>

更改vm.name之后的顺序

vm.name->vm._data.name->(未完..)