Vue2 day-03

目录

Vue常用特性

一.响应更新

1. 1 v-for更新监测

1.2 v-for就地更新

1.3 什么是虚拟DOM

1.4 diff算法更新虚拟DOM

总结:key值的作用和注意点:

二.过滤器

2.1 vue过滤器-定义使用

2.2 vue过滤器-传参和多过滤器

三. 计算属性(computed)

3.1 计算属性-定义使用

3.2 计算属性-缓存

3.3 计算属性和方法的区别

四. 侦听器(watch)

4.1 侦听器-定义使用

4.2 vue侦听器-深度侦听和立即执行

4.3 计算属性(computed)和侦听器( watch)的区别

五.Vue中响应式系统的原理

六.Vue中双向数据绑定的原理

---

Vue常用特性

一.响应更新

1. 1 v-for更新监测

当v-for遍历的目标结构改变, Vue触发v-for的更新

• 情况1: 数组翻转
• 情况2: 数组截取
• 情况3: 更新值

总结:

数组变更方法, 就会导致v-for更新, 页面更新

数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()

多学一招:

1.动态响应数据处理（数组、对象）

• Vue.set(data,index,newvalue);
  
  vm.$set(data,index,newvalue);

2.总结:这些方法会触发数组改变, v-for会监测到并更新页面

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

这些方法不会触发v-for更新

slice()

filter()

concat() 等

1.2 v-for就地更新

v-for 的默认行为会尝试原地修改元素而不是移动它们

这样的虚拟DOM对比方式, 可以提高性能 - 但是还不够高

1.3 什么是虚拟DOM

浏览器渲染页面的原理及流程

什么是虚拟DOM

真实DOM

虚拟DOM

1.4 diff算法更新虚拟DOM

• 无key:就地更新

• key为index:还是就地更新

• 有key (唯一): 按key比较更新

• Diff算法演示:

• 

  

  总结:key值的作用和注意点:

• key来给每个节点做一个唯一标识

• key的作用主要是为了高效的更新虚拟DOM

• 不用key也不影响功能(就地更新), 添加key可以提高更新的性能

• 关于v-for的key值设置

  1. 如果已渲染的列表元素下标不会有变化，key值设置为index即可（防止eslint警告）

  2. 如果已渲染的列表元素下标会有变化，key值请设置为唯一标识

  3. • diff算法默认使用“就地复用”的策略，是一个首尾交叉对比的过程。

     • 用index作为key和不加key是一样的，都采用“就地复用”的策略

     • “就地复用”的策略，只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出。

     • 将与元素唯一对应的值作为key，可以最大化利用dom节点，提升性能。

二.过滤器

• 过滤器就是一个函数, 传入值返回处理后的值

• 过滤器可以用在两个地方：双花括号插值和v-bind表达式。

• 过滤器应该被添加在JavaScript表达式的尾部，由“管道”符号指示 |

• 过滤器不改变真正的data，而只是改变渲染的结果，并返回过滤后的版本

• 全局注册时是filter，没有s的。而局部过滤器是filters，是有s的

2.1 vue过滤器-定义使用

语法:

• Vue.filter("过滤器名", (值) => {return "返回处理后的值"})

• filters: {过滤器名字: (值) => {return "返回处理后的值"}

例如:

• 全局定义字母都大写的过滤器

• 局部定义字符串翻转的过滤器

<template>
  <div>
    <p>原来的样子: {{ msg }}</p>
    <!-- 2. 过滤器使用
      语法: {{ 值 | 过滤器名字 }}
     -->
    <p>使用翻转过滤器: {{ msg | reverse }}</p>
    <p :title="msg | toUp">鼠标长停</p>
  </div>
</template>
​
<script>
export default {
  data(){
    return {
      msg: 'HelloVue'
    }
  },
  // 方式2: 局部 - 过滤器
  // 只能在当前vue文件内使用
  /*
     语法: 
     filters: {
       过滤器名字 (val) {
         return 处理后的值
       }
     }
  */
  filters: {
    toUp (val) {
      return val.toUpperCase()
    }
  }
}
</script>
​
<style>
​
</style>

总结: 把值转成另一种形式, 使用过滤器, Vue3用函数替代了过滤器.

全局注册最好在main.js中注册, 一处注册到处使用

2.2 vue过滤器-传参和多过滤器

可同时使用多个过滤器, 或者给过滤器传参

• 语法:

  • 过滤器传参: vue变量 | 过滤器(实参)

  • 多个过滤器: vue变量 | 过滤器1 | 过滤器2

<template>
  <div>
    <p>原来的样子: {{ msg }}</p>
    <!-- 1.
      给过滤器传值
      语法: vue变量 | 过滤器名(值)
     -->
    <p>使用翻转过滤器: {{ msg | reverse('&') }}</p>
    <!-- 2.
      多个过滤利使用
      语法: vue变量 | 过滤器1 | 过滤器2
     -->
    <p :title="msg | toUp | reverse('|')">鼠标长停</p>
  </div>
</template>
​
<script>
export default {
  data(){
    return {
      msg: 'Hello, Vue'
    }
  },
  filters: {
    toUp (val) {
      return val.toUpperCase()
    }
  }
}
</script>
​
<style>
​
</style>

总结: 过滤器可以传参, 还可以对某个过滤器结果, 后面在使用一个过滤器

三. 计算属性(computed)

3.1 计算属性-定义使用

• 模板中放入太多的逻辑会让模板过重且难以维护,使用计算属性可以让模板更加的简洁

• 一个数据, 依赖另外一些数据计算而来的结果

• computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化

语法:

computed: {
    "计算属性名" () {
        return "值"
    }
}

3.2 计算属性-缓存

• 计算属性是基于它们的依赖项的值结果进行缓存的，只要依赖的变量不变, 都直接从缓存取结果

• 计算属性根据依赖变量结果缓存, 依赖变化重新计算结果存入缓存, 比普通方法性能更高

3.3 计算属性和方法的区别

• 计算属性是基于他们的依赖进行缓存的，只有在相关依赖发生改变时，他们才会重新求值，也就是说，只要他的依赖没有发生变化，那么每次访问的时候计算属性都会立即返回之前的计算结果，不再执行函数

• 每次触发重新渲染时，调用方法将总会再次执行函数

四. 侦听器(watch)

4.1 侦听器-定义使用

使用watch可以侦听data/computed属性值改变

语法:

watch: {
      "被侦听的属性名" (newVal, oldVal){
          
      }
  }

• 一般用于异步或者开销较大的操作

• watch 中的属性,一定是data/computed中,已经存在的数据

4.2 vue侦听器-深度侦听和立即执行

• 侦听复杂类型, 或者立即执行侦听函数

• 当需要监听一个对象的改变时，普通的watch方法无法监听到对象内部属性的改变，只有data中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听

  语法:

  watch: {
      变量名 (newVal, oldVal){
          // 变量名对应值改变这里自动触发
      },
      变量名: {
          handler(newVal, oldVal){
  ​
          },
          deep: true, // 深度侦听(对象里面层的值改变)
          immediate: true // 立即侦听(网页打开handler执行一次)
      }
  }

4.3 计算属性(computed)和侦听器( watch)的区别

• 计算属性computed :

1. 支持缓存，只有依赖数据发生改变，才会重新进行计算

2. 不支持异步，computed内不写异步操作

3. computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值

4. 如果一个属性是由其他属性计算而来的，这个属性依赖其他属性，是一个多对一或者一对一，一般用computed

• 侦听属性watch：

1. 不支持缓存，数据变化，直接会触发相应的操作；

2. watch支持异步；

3. 监听的函数接收两个参数，第一个参数是最新的值；第二个参数是输入之前的值；

4. 当一个属性发生变化时，需要执行对应的操作；一对多；

• computed和watch的使用场景并不一样，computed的话是通过几个数据的变化，来影响一个数据，而watch，则是可以一个数据的变化，去影响多个数据。

五.Vue中响应式系统的原理

• 观察者模式又被称为 发布者-订阅者 模式，这种模式定义了对象间的一种一对多的依赖关系。当一个对象的状态发生改变时，所有依赖于它的对象都将得到通知，并完成自动更新。

• ES5提供的Object.defineProperty() 方法来劫持 （监控） 各属性的getter、setter，并在数据（对象）发生变动时通知订阅者，触发相应的监听回调。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

• Vue中的响应式处理中，大致可以划分三个模 块：Observer(观察者)、Watcher(订阅者)、Compile(指令解析)

• Observer 数据监听器，通过Object.defineProperty去劫持对象的访问器(getter、setter)数据对象的所有属性进行监听（数据劫持），监听到数据发生变化后通知订阅者。

• Dep:依赖收集器，添加订阅者，维护使用数据的各个依赖Watcher。

• Watcher 订阅者，关联Observer和Compile，Observer通知数据变化,Watcher 接收数据变更及时通知视图进行更新。Updater是它自身的一个方法，用于执行Compile中绑定的回调，更新视图。

• Compile主要作用就是解析template模板，对每个元素节点的指令进行扫描解析，根据指令模板替换数据，绑定Watcher的更新函数达到更新视图。

• 总结: vue采用的是观察者模式，vue在解析渲染时，会进行依赖收集，会将渲染的data数据，计算属性computed、侦听器watcher等，都收集到对应的dep中,当Object.defineProperty监听到数据变化，就根据依赖关系，派发更新。

  在Vue2.x中，利用的是 Object.defineProperty去劫持对象的访问器(getter、setter) ,当对象属性值发生变化时可获取变化，然后根据变化来作后续响应;

  在Vue3.0中，则是通过Proxy 代理对象进行类似的操作。劫持的是整个对象,只要对象中的属性变化了,都能劫持到变化。

六.Vue中双向数据绑定的原理

总结: vuejs是采取数据劫持结合发布者-订阅者模式的方式实现model-->view的数据绑定，通过Object.defineProperty()或Proxy来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的数据回调。

双向数据绑定的实现流程:

• 双向数据绑定是建立在单向数据绑定(model==>View)的基础之上的

• 在解析v-model指令时, 给当前元素添加input监听 当input的value发生改变时, 将最新的值赋值给当前表达式所对应的data属性