Vue 中视图更新

  当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-10-19 01:16:12

Vue 中视图更新的相关文章

vue中数组更新视图不响应问题

数组更新注意事项 Vue 包含一组观察数组的变异方法,所以它们也将会触发视图更新.这些方法如下: push() pop() shift() unshift() splice() sort() reverse() 由于 JavaScript 的限制,Vue 不能检测以下变动的数组: 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue当你修改数组的长度时,例如:vm.items.length = newLength 举个例子: var vm = ne

Vue中控制更新的方式

一.  强制更新的实例方法   vm.$forceUpdate() 迫使 Vue 实例重新渲染.注意它仅仅影响实例本身和插入插槽内容的子组件,而不是所有子组件. 在没有留意到数组或对象的变更检测注意事项,或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态. 然而,如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新,那么你可以通过 $forceUpdate 来做这件事. 二.   通过 v-once 创建低开销的静态组件 渲染普通的 HTML 元素在 Vue 中是非常快速的,

Vue.set 向响应式对象中添加响应式属性,及设置数组元素触发视图更新

一.为什么需要使用Vue.set? vue中不能检测到数组和对象的两种变化: 1.数组长度的变化 vm.arr.length = 4 2.数组通过索引值修改内容 vm.arr[1] = ‘aa’ Vue.$set(target,key,value):可以动态的给数组.对象添加和修改数据,并更新视图中数据的显示. vue在构造函数new Vue()时,就通过Object.defineProperty中的getter和setter 这两个方法,完成了对数据的绑定.所以直接通过vm.arr[1] =

详解Vue中的nextTick

Vue中的nextTick涉及到Vue中DOM的异步更新,感觉很有意思,特意了解了一下.其中关于nextTick的源码涉及到不少知识,很多不太理解,暂且根据自己的一些感悟介绍下nextTick. 一.示例 先来一个示例了解下关于Vue中的DOM更新以及nextTick的作用. //模板 <div class="app"> <div ref="msgDiv">{{msg}}</div> <div v-if="msg1

Vue中nextTick的正确使用

什么是Vue.nextTick() 官方文档解释如下: 在下次 DOM 更新循环结束之后执行延迟回调.在修改数据之后立即使用这个方法,获取更新后的 DOM. 获取更新后的DOM言外之意就是什么操作需要用到了更新后的DOM而不能使用之前的DOM或者使用更新前的DOM或出问题,所以就衍生出了这个获取更新后的DOM的Vue方法.所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码. <div class="app"> <div ref=

解决vue中对象属性改变视图不更新的问题

在使用VUE的过程中,会遇到这样一种情况, vue data 中的数据更新后,视图没有自动更新. 这个情况一般分为两种, 一种是数组的值改变,在改变数组的值的是时候使用索引值去更改某一项,这样视图不会实时更新 第二种情况是改变了对象的某一项,但是其他依赖这个数据的视图没更新 第一种情况是因为直接通过索引去改变数组,vue 对象监听不到他的变化 所以没有更新. ----解决方法  1. Vue.set(example1.items[0], { childMsg: 'Changed!'}) 2.使用

解决:Vue中给input框手动赋值,视图却不更新

如下示例: <a-form layout="vertical"> <a-row :gutter="16"> <a-col :span="24"> <a-form-item label="名称"> <a-input v-model="helloForm.name" placeholder="请输入名称"/> </a-form

vue中数据更新视图不更新的问题

遇到这样一个问题, 代码如下: this.memberLevelList.forEach(item => { item.levelDate = [item.startTime, item.endTime]; }) startTime和endTime是从后台获取的数据, 但是模板中需要levelDate, 于是直接赋值, 最后打印的memberLevelList结果中也有levelDate的数据, 但是页面上始终不渲染; 看了一下memberLevelList的observer(观察者), 发现并

vue数组对象修改触发视图更新

直接修改数组元素是无法触发视图更新的,如 this.array[0] = { name: 'meng', age: 22 } 修改array的length也无法触发视图更新,如 this.array.length = 2; 触发视图更新的方法有如下几种 1. Vue.set 可以设置对象或数组的值,通过key或数组索引,可以触发视图更新 数组修改 Vue.set(array, indexOfItem, newValue) this.array.$set(indexOfItem, newValue