【无标题】Vue补充笔记01

• shift + 点击刷新按钮 强制刷新

• 配置对象:指在new Vue(配置对象)，本质是一个对象但是对象的key的 名称是不能随意更改的，且对应的值的数据类型是固定的

• 配置对象的el属性，可以使用具体的dom: document.getElementById()，也可以使用选择器选择,#app或者.app.

• 解析过程：先有容器，再有vue实例，在对容易进行特殊语法解析并替换相关内容

• el 选择器只能匹配到第一个容器。一个容器只能被一个Vue实例接管。是一一对应关系

• v-bind是单向绑定，只能从Vue实例到容器，v-model是双向绑定。而v-model只能运用在表单/输入类型的元素上面。避免无意义的资源浪费。

• vue data函数中的this是指向VUE实例的。是因为data函数是由Vue进行调用的

• 对象的属性如果是淡红色的，表明该属性不可以被遍历

• object.defineProperty(object,name,options)

  • object 要添加对象的属性
  • name 属性的名称
  • options 配置项，对象{value:值}
  • object.defineProperty(person,age,{value:18}) 这样在person对象上就会多一个age属性值为18
  • 这样的定义的属性是默认不参与枚举的(不能被遍历的)，为了能使新加属性能够被枚举可以在配置项中添加 enumerable:true配置项
  • 这样定义的属性的值是默认不可以被改变的。但是可以在配置项中通过writable:true属性让其作为可以被修改的值
  • 这样定义的属性的值是默认不可以被删除的delete.person.age。但是可以在配置项中通过configurable:true属性让其作为可以被删除
  • get:function() 当在读取perosn.age时就回调用这个函数，且返回值就是age的值 invoke property getter 当前的值是通过getter属性值映射的，当被读取的时候就会有具体的值
  • set(value){}当值设置person.age时会触发这个函数

• 数据代理 通过一个对象代理另一个对象中属性的操作(读/写)

  • 如下代码所示可以通过x.info的修改动态改变y.info的值，而通过y.set的函数的修改也能改变数据的值实现数据的代理

    let x={info:1}
    let y={data:2}
    Object.defineProperty(y,'info',{
      get(){
        return x.info
      },
      set(value){
        x.info = value
      }
    })
  

• Vue中的数据代理

  • vue data中的数据都会出现在VUE实例的属性之中，在查看相关属性的时候也会有invoke property getter的提示，证明这些属性是通过object.defineProperty()进行代理的。也可以在VUE实例中查看的对应的属性的getter和setter
  • 在Vue实例中首先会将data中的数据写在VUE实例的_data属性之中，将其变为私有属性。然后通过数据代理在Vue实例中将_data属性提取出来放在和_data同级的数字那个中。通过getter和setter就可以完成数据的同步更新

• vm._data===data(写在vue data的对象)

• 数据劫持(暂放)

  • 打开VM中的_data

• $event事件关键字

• 滚动

  • @scroll 监听的是滚动条的滚动
  • @wheel 监听的是鼠标的滚轮滚动(即使滚动条到底了在走滚轮在动就会被触发)

• alt+tab 切换窗口

• watch

  • 在 vue中computed使用get和set函数而在watch中使用的handler:function(new,old)
  • 简写 在不需要其他配置项时可以直接使用这样的简写方式 name(new,old){}
  • 在watch的配置项中可以配置immediate:true属性，用于配置初始化的时候也让handler执行一次
  • vm.$watch('属性'，options) 同样可以的
  • 深度监视
    • 监听多级结构中的某个属性可以通过:'option.key':{handler:function(n,o)}'
    • 直接监听对象是不能监听到对象里层的属性的改变，这样只能监听到对象的地址改变
    • 如果想要监听多级结构中所有属性的改变可以使用deep:true属性，但是资源消耗比较大
    • 同理可以监听$store.state.key来监听vuex中的state的改变

• computed和watch

  • 异步 computed是需要依靠返回值的，不能完成异步任务
  • computed能完成的watch都能完成。但是watch比computed多出了一个异步处理功能

• key

  • 虚拟DOM 对比算法，用key作为对比标志，将新虚拟DOM和旧虚拟0DOM的key相同的内容对比。如果相同的话就会对旧的DOM复用。如果不同就会将以不同的点的为根节点替换其下所有节点内容

•   // //#region
    ...
    // #endRegion
    //强制折叠
  
  

• VUE数据监测对象原理

  • 直接修改数组的某一项，VUE是不能监听到数据的改变的。但是数据确实已经改变了
  • 但是如果数组的某一项是对象，修改对象中的属性，VUE是能够监测到数据额的改变的时候
  • VUE 对象监测
    • VUE监听对象的底层原理是在监听setter属性的改变

// data是一个需要被监听到的改变的对象
const obs = new Observe(data)
 
 let vm = {}
//  将修改了的值改变原有的值，并体现在vm上面
 vm._data = data=obs

// Observe是一个构造函数
function Observe(obj){
  const keys = Object.keys(obj)
  keys.forEach(key=>{
    // 这里的this是指调用了Observe函数的那个值，相当于vm
    object.defineProperty(this,k,{
      get(){
        return obj[k]
      },
      set(val){
        // 触发页面更新的操作
        obj[k] = val
      }
    })
  })
}
// 完善
// 1、当前模板是只能监听到一层数据的改变，可以添加一个递归函数知直到所有的对象都被遍历完成
// 2、将属性添加到vm中，而不只是添加到vm._data之中

• VUE SET 将后添加的属性也加入VUE响应式
  • vue.set(target,key,val)
  • vm.$set(target,key,val)
  • 局限
    • 只能给data中***已有对象添加***不存在的属性，不能直接在_data中添加的属性
• VUE检测数组原理
  • 数组中的每一个元素没有他独自的getter和setter，所以直接修改的时候VUE不能直接监听到数组里里面的改变
  • 所以VUE在数组中调用 push pop shift unshift splice sort reverse这几个会改变原数组的数组函数作为数组改变的监听的值
  • 被VUE管理的push pop shift unshift splice sort reverse这几个函数会被
    VUE重写
    • 正常调用Array的函数
    • 对模板重新解析
  • 同样也可以使用Vue.$set()函数对数据惊醒改变
  • 在数组中的对象存疑
    • 是响应式的

• 数据劫持

• 总结
  • 添加响应式数据 VUE.set(object,property,val)