【vue】过滤器、响应式数据原理、key的原理

过滤器

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

  <div>{{mag|tool|tool2}}</div>
  

在v-bind 表达式表达式中

 <a :href="mag2">百度一下</a>

过滤器中可以传多个参数 book值作为第一个参数 50作为第二个参数 100作为第三个参数

<div>{{book|ter(50,100)}}</div>

示例：

    
    <div id="app">
        <!-- 过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->

        <!--  在双花括号插值中 -->
            <div>{{mag|tool|tool2}}</div>

        <!-- 过滤器中可以传多个参数 book值作为第一个参数 50作为第二个参数 100作为第三个参数-->
        <div>{{book|ter(50,100)}}</div>
        <!-- 在v-bind 表达式表达式中 -->
        <a :href="mag2">百度一下</a>
        
    </div>
    <script>
        new Vue({
            el:"#app",
            data:{
                mag:20,
                book:"今天是",
                mag2:"www.baidu.com"
            },
            filters:{
                tool(str){
                  return str+"6666" //206666
                },
                tool2(str){
                  if(str>15){
                    return "正确"
                  }
                  else{
                    return "错误"
                  }
                },
                ter(str,a,b){
                     let qingqi=new Date().toLocaleDateString()
                     console.log(str,a,b);//今天是 50 100
                     return str+qingqi
                },
                ters(str){
                    return "http://"+str
                }
            }
        })
    </script>

响应式数据原理

Vue 的响应式是通过 Object.defineProperty 对数据进行劫持，并结合发布订阅者模式实现。 Vue 利用 Object.defineProperty 创建一个 observe 来劫持监听所有的属性，把这些属性全部转为 getter 和 setter。Vue 中每个组件实例都会对应一个 watcher 实例，它会在组件渲染的过程中把使用过的数据属性通过 getter 收集为依赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

key的原理

data中for循环的容器数据个数发生变化时,会跟for中的vm节点个数作比较
如果数据多了,会在vm节点后面增加对应数量的节点,并不会重新创建所有节点,然后vm去更新对应的DOM
然后就去刷新数据到界面: 按照for的数据容器中的数据顺序来渲染如果用户以前操作过旧节点,那么新数据顺序可能会出现跟旧节点顺序不匹配的效果(旧节点跟旧数据没有对应起来)
解决方案: for循环时把数据跟创建的节点利用给元素绑定唯一key值
简答:因为vue在刷新页面组件时,会把旧节点跟新vm节点做比较,如果要增加节点,并不会删除旧节点,而是复用，这样会导致节点跟数据没有绑定关系而重新渲染,用key可以将数据与节点绑定起来