当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>
原文地址：https://www.cnblogs.com/xshan/p/12333827.html
时间： 2024-08-12 03:57:29