vue——响应式数据、双向数据绑定、filter过滤器、面试题

一、响应式数据（面试题）

1.响应式数据：

• 内存中的数据改变 页面UI随之动态刷新 这种数据就是响应式数据。
• 只能由代码改变UI或者只能由UI改变代码。

2.响应式数据的设计原理：

 vue2.0：

• 采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各属性setter，getter。在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。
• 用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。视图中的变化会通过 watcher 更新 vm 中的数据 而非 data 中的数据。若 data 中某属性多次发生变化，watcher 仅会进入更新队列一次。

  vue3.0：

• 使用es6 proxy 代理了data对象

    自实现响应式数据绑定：

 结果显示：

二、数据绑定（面试题）

1.双向数据绑定

v-model:

对 input 使用 v-model，实际上是指定其 :value 和 @input

• 代码改变UI,UI也能改变代码
• 第一向：(响应式数据)数据容器中的数据改变，页面也随之动态刷新(DOM操作改变页面)  
•  第二向：用户操作DOM改变了页面 数据容器中的数据的值也随之改变

 

        改变
        查看
     
 {{msg}}
 
        
        

    
    

结果显示：

 

 三、v-for循环渲染中key的意义（面试题） 

使用场景：

data中for循环的容器数据个数发生变化时,会跟for中的vm节点个数作比较 如果数据多了,会在vm节点后面增加对应数量的节点,并不会重新创建所有节点,然后vm去更新对应的DOM 然后就去刷新数据到界面: 按照for的数据容器中的数据顺序来渲染如果用户以前操作过旧节点,那么新数据顺序可能会出现跟旧节点顺序不匹配的效果(旧节点跟旧数据没有对应起来)

解决方案:  

for循环时把数据跟创建的节点利用给元素绑定唯一key值
因为vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点,并不会删除旧节点,而是复用 这样会导致节点跟数据没有绑定关系而重新渲染,用key可以将数据与节点绑定起来

注：key值不能用数组的下标index 因为数组改变 下标也会改变   

意义：

1. 让数据跟真实的dom一一关联 使之不发生渲染混乱的情况
2. 提高绘制渲染效率  高效更新虚拟DOM

四、filter过滤器

•  filter主要用于数据展示之前的处理
• 只能用在v-bind或者插值表达式中
• 可以调用多个函数 也可以传递多个参数

 

        
{{timeformat(birth)}}--调methods方法，在this上
        
{{birth|tool|tool2}}--调filter过滤器:( 参数|函数)，不在this上
        
{{birth|tool3(100,200)}}--多种传参
    
    

结果显示：