03-Vue: v-for就地更新、过滤器_vue过滤器可以用在v-for里面吗?-CSDN博客

本文链接：https://blog.csdn.net/weixin_51339105/article/details/125089670

1.v-for就地更新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    
    <div id="app">
         <ul>
             <li v-for="item in arr">
                 {{item}}
             </li>
         </ul>
         <button @click="add">新增</button>
    </div>

    
    <script>
        new Vue({
            el:"#app",
            data:{
                arr:['老大','老二','老三']
            },
            methods:{
               add(){
                   this.arr.splice(1,0,"新来的")
               }
            }
        })
    </script>
</body>
</html>

js原生数组变化
数组变化，把数组重新渲染，会影响重绘和回流（页面布局）
v-for更新
循环出新的虚拟DOM结构，和旧的虚拟DOM解构对比，复用标签就地更新内容
真实DOM
在document对象上，渲染到浏览器上显示的标签
虚拟DOM
本质是保存节点信息，属性和内容的一个js对象
好处：
1.提高DOM更新的性能，不频繁的操作真实Dom,在内存中找到变化的部分，再更新真实DOM（打补丁）；

2.diff算法

1.同级比较—根元素变化，整个DOM数删除重建；
2.同级比较—根元素不变，属性改变更新属性（dom复用，只更新属性）；

标签内子标签/内容改变，diff算法如何对比？
1.无key值：从第二个往后更新内容，性能不高；
2.有key，值为索引：先产生新旧虚拟dom,根据key比较，还是就地复用；
3.有key,值为id:先产生新旧虚拟dom，根据key比较
（key值是唯一的的不重复的字符串或数值，有id就一定用id，没有就用index,key值配合虚拟dom,有更好的性能）

3.过滤器

转换格式：过滤器就是一个函数，传入值返回处理后的值；
过滤器只能用在：插值表达式和v-bind动态属性值；
使用场景：字符串翻转；字母转大写；时间对象转日期格式；
语法：
1.全局：vue.filter(‘过滤器名字’，（值）=>{return “处理后的值”})；
2.局部：
filters:{
过滤器名字：（值）=>{return “处理后的值”}
}
使用：
{{表达式 | 过滤器名}}；
<标签：title="变量 | 过滤器’></标签>

4.过滤器传参和多过滤器

传参 {{变量 | 过滤器（参数）}}
多过滤器{{变量 | 过滤器1 | 过滤器2}}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<body>
    
    <div id="app">
         {{str | toUp}}

         <p :title="str| toUp">大写hello</p>
         {{price | toFix(3)}}
    </div>

    
    <script>
        // 局部
        
        new Vue({
            el:"#app",
            data:{
                str:"hello",
                price:7890
            },
            methods:{
               
            },
            filters:{
                // 只能在当前实例使用
                'toUp':(val)=>{
                    return val.toUpperCase()
                },
                'toFix':(val,n)=>{
                    return val.toFixed(n)
                }
            }
        })
    </script>
</body>
</html>