Vue 中视图更新

时间：2022-03-20 18:18:04

　　当vue的data中的值发生变化后，视图中引用部分的值是否会同时发生变化呢？首先，我们要知道有哪些更新的类型。

　更新的类型

　　1、直接赋值更新。this.heros=[‘ ‘]，模板会立即更新。

　　2、通过函数更新。this.heros.push("xx)。

　更新的函数：

　　push()：在数组最后添加元素；

　　pop()：删除最后一个元素；

　　shift()：删除最后一个元素；

　　unshift()：在开头添加一个元素；

　　splice()：可以增加、修改、删除元素。splice函数使用方法：其需要传递开始操作元素的索引，影响的元素个数。如是：在指定位置增加元素，其第二个参数（影响元素个数）必须为0，如果为其他的则变成了修改元素了。其核心思想为：从开始影响的索引元素开始，根据传递的第二个元素判断，将会影响后面的几个元素，然后，根据后面的items值，去影响，如果items的个数多于影响个数，则会在被影响元素后面添加剩余的元素；如果，只有起始元素索引和影响元素，则会将影响元素删除。

　vue的set()方法

　　在vue中，直接通过下标修改元素的值或增加新的属性，视图是不会自动更新的。此时，需要使用set()方法。 　　 　　更新值时是第一个参数是要【更新的对象】，第二个参数是对象中【要更新的索引】，第三个参数是【更改后的值】。 　　增加属性时第一个参数是具体要添加的对象（如果是数组中某一项，则要通过索引直接指明），第二个参数是要添加属性的【属性名】，第三个参数是【属性值】 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>vue触发视图更新</title>
</head>

<body>
    <div id="app">
        书名：
        <ul>
            <li v-for="book in books" key="book">{{book}}</li>
        </ul>
        <button @click="update_1">直接更新</button>
        <button @click="update_2">通过函数更新</button>
        <button @click="pop_1">通过函数<span style="color: red;">删除最后一个元素</span> </button>
        <button @click="shift_1">通过函数<span style="color: red;">删除第一个元素</span> </button>
<button @click="unshift_1">在开头添加一个元素</button>
<button @click="splice_add">在第2个元素后增加多个元素</button>
        <button @click="splice_update">修改第2个元素的值</button>
        <button @click="splice_update_add">修改第2个值，并在其后添加元素</button>
        <button @clicK="splice_del">删除第2个数</button>
        <button @click="update_set">set方法变更值</button>
                <div v-for="book in books_2">
            {{book.title}}：{{book.author}}
        </div>
        <button @click="set_2">补上作者</button>
</div>
    <script>
        new Vue({
            el: ‘#app‘,
            data: {
                books: [‘三国演义‘, ‘水浒传‘, ‘数据结构‘, ‘操作系统‘],
                books_2: [{
                        title: ‘水浒传‘,
                        author: ‘施耐庵‘,
                    },
                    {
                        title: ‘三国演义‘,
                        author: ‘罗贯中‘,
                    },
                    {
                        title: ‘西游记‘,
                        author: ‘吴承恩‘,
                    },
                    {
                        title: ‘红楼梦‘,
                    },
                ]
            },
            methods: {
                update_1() {
                    this.books = [‘三国演义‘, ‘水浒传‘, ‘红楼梦‘]
                },
                update_2() {
                    this.books.push("西游记")
                },
                pop_1() {
                    this.books.pop()
                },
                shift_1() {
                    this.books.shift();
                },
                unshift_1() {
                    this.books.unshift(‘这是四大名著‘)
                },
                splice_add() {
                    this.books.splice(2, 0, ‘计算机网络基础‘, ‘计算机组成原理‘)
                },
                splice_update() {
                    this.books.splice(1, 1, ‘红楼梦‘)
                },
                splice_update_add() {
                    this.books.splice(1, 1, "红楼梦", "史记")
                },
                splice_del() {
                    this.books.splice(1, 1)
                },
                update_set() {
                    Vue.set(this.books, 2, ‘西游记‘)
                },
                set_2() {
                    Vue.set(this.books_2[3], ‘author‘, ‘曹雪芹‘, )
                }
            }

        })
    </script>
</body>

</html>

 

相关文章