列表渲染

1. 基本列表

v-for指令：

用于展示列表数据
语法：v-for="(item,index) in list" :key="index"
可以遍历数组，对象，字符串，指定次数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- 遍历数组 -->
    <h2>用户信息（遍历数组）</h2>
    <ul>
        <li v-for="p in persons" :key="p.id">
            {{p.name}} - {{p.age}}
        </li>
    </ul>

    <!-- 遍历对象 -->
    <h2>汽车信息（遍历对象）</h2>
    <ul>
        <li v-for="(c, index) in car" :key="index">
            {{index}} - {{c}}
        </li>
    </ul>

    <!-- 遍历字符串 -->
    <h2>遍历字符串</h2>
    <ul>
        <li v-for="(char, index) in str" :key="index">
            {{index}} - {{char}}
        </li>
    </ul>

    <!-- 遍历指定次数 -->
    <h2>遍历指定次数</h2>
    <ul>
        <li v-for="(num, index) in 5" :key="index">
            {{index}} - {{num}}
        </li>
    </ul>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            persons:[
                {id:1,name:'孙笑川',age:33},
                {id:2,name:'刘波',age:32},
                {id:3,name:'Giao哥',age:34}
            ],
            car: {
                name: '五菱宏光Mini',
                price: '3-4万',
                color: 'pink'
            },
            str: 'hello'
        }
    })
</script>
</body>
</html>

2. key的原理

虚拟DOM中key的作用：
key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据新数据生成新的虚拟DOM，随后进行新旧虚拟DOM的差异比较（diff算法）；
对比规则
（1）旧虚拟DOM中找到了与新虚拟DOM相同的key
- 若虚拟DOM中内容没变，直接使用之前的真实DOM；
- 若虚拟DOM中内容改变，则生成新的真实DOM，随后替换页面中之前的真实DOM
（2）旧虚拟DOM中没有找到与新虚拟DOM相同的key
- 创建新的真实DOM，随后渲染到页面
用index作为key可能引发的问题
（1）若对数据进行逆序添加、删除等破坏原有顺序的操作，会产生没必要的真实DOM更新（界面没问题，但效率低）
（2）如果结构中还包含输入类的DOM，会产生错误的DOM更新，界面出现问题

如何选择key

（1）建议使用每条数据的唯一标识作为key

（2）如果不存在对数据进行逆序添加、删除等破坏原有顺序的操作，仅用于渲染列表进行展示，也可以使用index下标索引作为key

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>key的原理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <!-- 遍历数组 -->
    <h2>用户信息（遍历数组）</h2>
    <button @click.once="add">添加用户</button>
    <ul>
        <li v-for="p in persons" :key="p.id">
            {{p.name}} - {{p.age}}
            <input type="text">
        </li>
    </ul>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    new Vue({
        el: '#root',
        data: {
            persons:[
                {id:1,name:'孙笑川',age:33},
                {id:2,name:'刘波',age:32},
                {id:3,name:'Giao哥',age:34}
            ]
        },
        methods: {
            add() {
                const  p = {id:4,name:'药水哥',age:33};
                this.persons.unshift(p)
            }
        }
    })
</script>
</body>
</html>

3. Vue监视数据的原理

Vue会监视data中所有层次的数据
如何监测对象中的数据？
通过setter，在new Vue时就传入要监测的数据
（1）对象中后追加的属性，Vue默认不做响应式处理
（2）针对（1）中的问题，可以使用如下API：
```
Vue.set(target, propertyName/index, value) 或
vm.$set(target, propertyName/index, value)
```
如何监测数组中的数据？
通过包裹数组更新元素的方法实现，即：
（1）调用原生对应的方法
（2）重新解析模板 ---> 更新页面

修改数组元素的方法

（1）API：push(),pop(),shift(),unshift(),ssplice(),sort(),reverse()

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

注：Vue.set()或vm.$set 不能给vm或vm的根数据对象添加属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue监测数据改变的原理（对象）</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>姓名：{{name}}</h2>
    <h2>年龄：{{33}}</h2>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            name: '孙笑川',
            age: 33
        }
    })
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue监测数据改变的原理（数组）</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h2>老师姓名：{{name}}</h2>
    <h2>老师年龄：{{33}}</h2>
    <hr>
    <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.hobbies" :key="index">
            {{h}}
        </li>
    </ul>
    <hr>
    <h2>朋友们</h2>
    <ul>
        <li v-for="(f,index) in student.friends" :key="index">
            {{f.name}} - {{f.age}}
        </li>
    </ul>
</div>

<script type="text/javascript">
    //关闭开发环境提示
    Vue.config.productionTip = false

    //创建Vue实例
    const vm = new Vue({
        el: '#root',
        data: {
            name: '孙笑川',
            age: 33,
            student: {
                name: '刘波',
                sex: '',
                age: {
                    rAge: 30,
                    sAge: 18,
                },
                hobbies: ['跑步','游泳','打篮球'],
                friends: [
                    {name:'张三',age:18},
                    {name:'李四',age:19},
                    {name:'王五',age:10}
                ]
            }
        },
        methods: {
            addSex() {
                //Vue.set(this.student, 'sex', '男');
                this.$set(this.student, 'sex', '男');
            }
        }
    })
</script>
</body>
</html>

1. 基本列表

2. key的原理

3. Vue监视数据的原理

评论 (0)