基本列表

1.用于展示列表数据

2.语法: v-for="(item, index) in xxx" ;key="yyy"

3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)

<body>
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <ul>
            <li v-for="(p,index) of persons" :key="p.id">
                <!-- 姓名-年龄 -->
                {{p.name}}-{{p.age}}
            </li>
            
        </ul>

        <!-- 遍历对象 -->
        <h2>汽车信息</h2>
        <ul>
            <li v-for="(value,k) of car" :key="k">
                {{k}}-{{value}}
            </li>
            
        </ul>

        <!-- 遍历字符串 -->
        <h2>测试遍历字符串（用得少）</h2>
        <ul>
            <li v-for="(char,index) of str" :key="index">
                {{index}}-{{char}}
            </li>
            
        </ul>

        <!-- 遍历指定次数 -->
        <h2>测试遍历指定次数（用得少）</h2>
        <ul>
            <li v-for="(number,index) of 5" >
                {{index}}-{{number}}
            </li>
            
        </ul>
    </div>
    

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

        var vm = new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20},
                ],
                car:{
                    name:'奥迪',
                    price:'70w',
                    color:'黑色'
                },
                str:'hello'
            },
            
        })
    </script>
</body>

key原理

利用index作为key

<body>
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <button @click.once="add">添加一个老刘</button>
        <ul>
            <li v-for="(p,index) of persons" :key="index">
                {{p.name}}-{{p.age}} <input type="text">
            </li>
            
        </ul>

        
    </div>
    

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

        var vm = new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20},
                ],
                
            },
            methods:{
                add(){
                    const p = {id:'004',name:'老刘',age:'40'};
                    this.persons.unshift(p);
                }
            }
        })
    </script>
</body>

生成页面后，在文本框输入文字，再点击添加按钮

添加后效果

原因

利用id作为key

<body>
    <div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <button @click.once="add">添加一个老刘</button>
        <ul>
            <li v-for="(p,index) of persons" :key="p.id">
                {{p.name}}-{{p.age}} <input type="text">
            </li>
            
        </ul>

        
    </div>
    

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

        var vm = new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:'001',name:'张三',age:18},
                    {id:'002',name:'李四',age:19},
                    {id:'003',name:'王五',age:20},
                ],
                
            },
            methods:{
                add(){
                    const p = {id:'004',name:'老刘',age:'40'};
                    this.persons.unshift(p);
                }
            }
        })
    </script>
</body>

效果：

原因

面试题: react、 vue中的key有什么作用? (key的内部原理)

1.虑拟DOM中key的作用:

key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM],

随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较。比较规则如下

2.对比规则:

(1).旧虚拟DOM中找到了与新虚拟DOM相同的key:

①.若虚拟DOM中内容没变，直接使用之前的真实DOM!

②.若虛拟DOM中内容变了，则生成新的真实DOM,随后替换掉页面中之前的真实DOM。

(2).旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM.随后渲染到到页而。

3.用index作为key可能会引发的问题:

(1).若对数据进行:逆序添加、逆序删除等破环顺序操作:

会产生没有必要的真实DOM更新==>界面效果没问题，但效率低。

(2).如果结构中还包含输入类的DOM:

会产生错误DOM更新==>界面有问题。

4.开发中如何选择key?:

(1).最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。

(2).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

列表过滤

在搜索框中输入文字，下方只显示与文字有关的信息

准备好一个容器

<div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <ul>
            <li v-for="(p,index) of filPersons" :key="p.id">
                <!-- 姓名-年龄 -->
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
            
        </ul>

        
</div>

法一：用watch监听实现

var vm = new Vue({
            el:"#root",
            data:{
                keyWord:'',
                persons:[
                    {id:'001',name:'马冬梅',age:18,sex:'女'},
                    {id:'002',name:'周冬雨',age:19,sex:'女'},
                    {id:'003',name:'周杰伦',age:20,sex:'男'},
                    {id:'004',name:'温兆伦',age:20,sex:'男'},
                ],
                filPersons:[]
            },
            watch:{
                keyWord:{
                    immediate:true,
                    handler(val){
                        //此处的p是数组中的每个对象
                        this.filPersons = this.persons.filter((p)=>{
                            // return p.name是否包含val
                            return p.name.indexOf(val) != -1;
                    //return后面跟上过滤条件（匹配条件）要的是有重复的即为不等于-1的
                        })
                    }
                }
            }
        })

法二：用computed实现（能用computed实现的都能用watch）

var vm = new Vue({
            el:"#root",
            data:{
                keyWord:'',
                persons:[
                    {id:'001',name:'马冬梅',age:18,sex:'女'},
                    {id:'002',name:'周冬雨',age:19,sex:'女'},
                    {id:'003',name:'周杰伦',age:20,sex:'男'},
                    {id:'004',name:'温兆伦',age:20,sex:'男'},
                ]
            },
            computed:{
                filPersons(){
                    return this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) != -1;
                    })
                }
            }
        })

列表排序

<div id="root">
        <!-- 遍历数组 -->
        <h2>人员列表</h2>
        <input type="text" placeholder="请输入名字" v-model="keyWord">
        <button @click="sortType= 2">年龄升序</button>
        <button @click="sortType= 1">年龄降序</button>
        <button @click="sortType= 0">原顺序</button>
        <ul>
            <li v-for="(p,index) of filPersons" :key="p.id">
                <!-- 姓名-年龄 -->
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
            
        </ul>

        
    </div>
    

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

    
        //用computed实现
        var vm = new Vue({
            el:"#root",
            data:{
                keyWord:'',
                sortType:0,//0原顺序  1降序  2升序
                persons:[
                    {id:'001',name:'马冬梅',age:30,sex:'女'},
                    {id:'002',name:'周冬雨',age:42,sex:'女'},
                    {id:'003',name:'周杰伦',age:18,sex:'男'},
                    {id:'004',name:'温兆伦',age:19,sex:'男'},
                ]
            },
            computed:{
                filPersons(){
                    const arr = this.persons.filter((p)=>{
                        return p.name.indexOf(this.keyWord) != -1;
                    })
                    //判断是否需要排序
                    if (this.sortType) {
                        arr.sort((a,b)=>{
                            return this.sortType == 1 ? b.age-a.age : a.age-b.age;
                        })
                    }
                    return arr;
                }
            }
        })
    
    </script>

更新时的问题

用下标索引找到信息进行复制修改操作是无效的

<div id="root">
        <h2>人员列表</h2> 
        <button @click="updateMei">更新马冬梅信息</button>    
        <ul>
            <li v-for="(p,index) of persons" :key="p.id">
                <!-- 姓名-年龄 -->
                {{p.name}}-{{p.age}}-{{p.sex}}
            </li>
            
        </ul>

        
    </div>
    

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

    
        //用computed实现
        var vm = new Vue({
            el:"#root",
            data:{
                persons:[
                    {id:'001',name:'马冬梅',age:30,sex:'女'},
                    {id:'002',name:'周冬雨',age:42,sex:'女'},
                    {id:'003',name:'周杰伦',age:18,sex:'男'},
                    {id:'004',name:'温兆伦',age:19,sex:'男'},
                ]
            },
            methods: {
                updateMei(){
                    //奏效
                    /* this.persons[0].name = '马老师',
                    this.persons[0].age = 50,
                    this.persons[0].sex = '男' */

                    // this.persons[0] = {id:'001',name:'马老师',age:50,sex:'男'}//赋值方法改 不奏效
                    this.persons.splice(0,1,{id:'001',name:'马老师',age:50,sex:'男'})
                }
            },
        })
    
    </script>

Vue.set的使用

<div id="root">
        <h1>学校信息</h1>
        <h2>学校名称：{{name}}</h2>
        <h2>学校地址：{{address}}</h2>
        <hr>
        <h1>学生信息</h1>
        <button @click="addSex">添加有个性别属性，默认值为男</button>
        <h2>姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">性别：{{student.sex}}</h2>
        <h2>年龄：真实{{student.age.rAge}}，对外：{{student.age.sAge}}</h2>
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}-{{f.age}}
            </li>
        </ul>
    </div>

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

        var vm = new Vue({
            el:"#root",
            data:{
                name:'尚硅谷',
                address:'北京',
                student:{
                    name:'tom',
                    age:{
                        rAge:40,
                        sAge:29
                    },
                    friends:[
                        {name:'jerry',age:35},
                        {name:'jane',age:36}
                    ]
                }
            },
            methods:{
                addSex(){
                    // Vue.set(this.student,'sex','男')
                    this.$set(this.student,'sex','男')
                }
            }

        })

    </script>

Vue检测数据改变原理

数组

如果不用Vue.set那就不能在页面渲染（后台改变数据页面不会发生变化）

<div id="root">
        <h1>学校信息</h1>
        <h2>学校名称：{{school.name}}</h2>
        <h2>学校地址：{{school.address}}</h2>
        <h2>校长是：{{school.leader}}</h2>
        <hr>
        <h1>学生信息</h1>
        <button @click="addSex">添加有个性别属性，默认值为男</button>
        <h2>姓名：{{student.name}}</h2>
        <h2 v-if="student.sex">性别：{{student.sex}}</h2>
        <h2>年龄：真实{{student.age.rAge}}，对外：{{student.age.sAge}}</h2>
        <h2>爱好</h2>
        <ul>
            <li v-for="(h,index) in student.hobby" :key="index">
                {{h}}
            </li>
        </ul>
        
        <h2>朋友们</h2>
        <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                {{f.name}}-{{f.age}}
            </li>
        </ul>
    </div>

    <script>
        //阻止vue在启动时生成生产提示
        Vue.config.productionTip = false;

        var vm = new Vue({
            el:"#root",
            data:{
                school:{
                    name:'尚硅谷',
                    address:'北京',
                },
                student:{
                    name:'tom',
                    age:{
                        rAge:40,
                        sAge:29
                    },
                    hobby:['抽烟','喝酒','烫头'],
                    friends:[
                        {name:'jerry',age:35},
                        {name:'jane',age:36}
                    ]
                }
            },
            methods:{
                addSex(){
                    // Vue.set(this.student,'sex','男')
                    this.$set(this.student,'sex','男')
                }
            }

        })

    </script>
</body>

总结

Vue监视数据的原理:

1.vue会监视data中所有层次的数据。

2.如何监测对象中的数据?

通过setter实现监视。且要在new Vue时就传入要监测的数据。

(1).对象中后追加的属性，Vue默认不做响应式处理

(2) .如需给后添加的属性做响应式，请使用如下API:

Vue.set (target. propertyName/ index. value) 或

vm.$set(target, propertyName/index. value)

3.如何监测数组中的数据?

通过包表数组更新元素的方法实现。本质就是做了两件事:

(1).调用原生对应的方法对数组进行更新。(push unshift等)

(2).重新解析模板，进而更新页面。

4.在Vue修改数组中的某个元素定要用如下方法:

(1).使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()

(2).Vue.set()或vm.$set()

特别注意: Vue.set() 和vm. $set()不能给vm或vm的根数据对象添加属性! ! !（vm或_data）

更多推荐

Vue列表渲染

Vue列表渲染

基本列表

key原理

利用index作为key

利用id作为key

列表过滤

列表排序

更新时的问题

Vue.set的使用

Vue检测数据改变原理

数组

总结

发布评论取消回复

最近发表

热门文章

标签列表

Vue列表渲染

基本列表

key原理

利用index作为key

利用id作为key

列表过滤

列表排序

更新时的问题

Vue.set的使用

Vue检测数据改变原理

数组

总结

相关文章

发布评论取消回复

最近发表

热门文章

标签列表