Vue.set与this.$set的用法与使用场景介绍

2024-07-29 00:57:08

Vue.set()和this.$set()介绍：

在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；
当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。

一。为什么有Vue.set

由于JavaScript的限制，Vue无法检测到data中数组和对象的变化，因此也不会触发视图更新

二。解决方法

数组

1.使用Vue提供的变异方法

Vue对这些JS数组方法进行了封装，通过这些方法是可以检测到数组更新的。

2.将原数组整个替换

如下例中，是要实现vm.items[1] = ‘excess’

<body>
<div id="app">
    <ul>
        <li v-for="(item, index) in items">
            {{ index }} : {{ item }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: '#app',
    data: {
        items: ['a', 'b', 'c']
    },
    created() {
        this.items = ['a', 'test', 'c']
    }
})
</script>
</body>

3.使用Vue.set（见后文）

对象

1.将原对象整个替换

如下例中，是要实现给object新增一个键值对{test: ‘newthing’}

<body>
<div id="app">
    <ul>
        <li v-for="(value, name) in object">
            {{ name }} : {{ value }}
        </li>
    </ul>
</div>

<script>
let vm = new Vue({
    el: '#app',
    data: {
        object: {
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            publishedAt: '2016-04-10'
        }
    },
    created() {
        this.object = {
            title: 'How to do lists in Vue',
            author: 'Jane Doe',
            publishedAt: '2016-04-10',
            test: 'newthing'
        }
    }
})
</script>
</body>

2.使用Vue.set（见后文）

三。Vue.set

对于数组

Vue不能检测以下数组的变动:

利用索引值直接设置一个数组项时，例如vm.list[0]=newValue
修改数组长度时，例如vm.list.length=newLength

举个栗子

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

这时可以使用Vue.set或者this.$set

使用方法

Vue.set(target,index,newValue)

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)

// this.$set
vm.$set(vm.items, indexOfItem, newValue)

对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。

举个栗子

var vm = new Vue({
  data:{
    a:1
  }
})

// `vm.a` 是响应式的

vm.b = 2
// `vm.b` 是非响应式的

使用方法

Vue.set(target,key,value)

Vue.set(vm.someObject, 'b', 2)

this.$set(this.someObject,'b',2)

注意

Vue不允许动态添加根级响应式属性

const app = new Vue({
  data: {
    a: 1
  }
  // render: h => h(Suduko)
}).$mount('#app1')

Vue.set(app.data, 'b', 2)

只可以使用Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

var vm=new Vue({
    el:'#test',
    data:{
        //data中已经存在info根属性
        info:{
            name:'小明';
        }
    }
});
//给info添加一个性别属性
Vue.set(vm.info,'sex','男');

四。使用场景

当我们对data中的数组或对象进行修改时，有些操作方式是非响应式的，Vue检测不到数据更新，因此也不会触发视图更新。此时需要使用Vue.set()进行响应式的数据更新。

到此这篇关于Vue.set与this.$set的用法与使用场景的文章就介绍到这了,更多相关Vue.set与this.$set用法内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

Vue.set() this.$set()引发的视图更新思考及注意事项

引文 vue文档列表渲染中有条注意事项: 这里提到的两种情况实际改变了数据但是没有触发视图更新. 由此引出Vue.set(),先上文档API: this.$set()和Vue.set()本质方法一样,前者可以用在methods中使用. set方法调用时,可以触发页面全部重新渲染. 比如在vue中有个data数组arr: //arr=[1,2,3] arr[1]='b' console.log(arr) // [1,2,3] Vue.set(arr,2,'c') console.log(arr
从vue源码解析Vue.set()和this.$set()

前言最近死磕了一段时间vue源码,想想觉得还是要输出点东西,我们先来从Vue提供的Vue.set()和this.$set()这两个api看看它内部是怎么实现的. Vue.set()和this.$set()应用的场景平时做项目的时候难免不会对数组或者对象进行这样的骚操作操作,结果发现,咦~~,他喵的,怎么页面没有重新渲染. const vueInstance = new Vue({ data: { arr: [1, 2], obj1: { a: 3 } } }); vueInstance.
Vue.set()和this.$set()使用和区别

在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去: 当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 如下代码,给 student对象新增 age 属性 data () { return { student: { name: '', sex: '' } } } mounted () { // --钩子函数,实例挂载之后 this.student.age = 24
Vue.set与this.$set的用法与使用场景介绍

目录 Vue.set()和this.$set()介绍: 一.为什么有Vue.set 二.解决方法数组对象三.Vue.set 对于数组对于对象注意四.使用场景 Vue.set()和this.$set()介绍: 在我们使用vue进行开发的过程中,可能会遇到一种情况:当生成vue实例后,当再次给数据赋值时,有时候并不会自动更新到视图上去:当我们去看vue文档的时候,会发现有这么一句话:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新. 一.为什么有Vue.set 由于JavaSc
futuretask用法及使用场景介绍

FutureTask可用于异步获取执行结果或取消执行任务的场景.通过传入Runnable或者Callable的任务给FutureTask,直接调用其run方法或者放入线程池执行,之后可以在外部通过FutureTask的get方法异步获取执行结果,因此,FutureTask非常适合用于耗时的计算,主线程可以在完成自己的任务后,再去获取结果.另外,FutureTask还可以确保即使调用了多次run方法,它都只会执行一次Runnable或者Callable任务,或者通过cancel取消FutureTa
Vue新玩具VueUse的具体用法

目录前言什么是 VueUse 简单上手还有我们熟悉的防抖和节流还还有全局状态共享的函数更多前言上次在看前端早早聊大会中, 尤大大再一次提到了 VueUse 的一个库. 好奇了一下,点看看了看.好家伙啊, 我直接好家伙.这不就是曾经我也想自己写一个 vue 版的 hooks 库吗?(因为我觉得 vue3 和 hooks 太像了) 可是我还不太会, 你现在直接把我的梦想给破灭了,下面我们一起来看看吧!VueUse 作者 Anthony Fu 分享可组合的 Vue_哔哩哔哩_bi
vue 内置组件 component 的用法示例详解

目录 component is 内置组件切换方法一: component is 内置组件切换方法二: component is 内置组件切换方法一: component组件(单独拿出一个组件来专门进行切换使用) 使用is来绑定你的组件:如下面的reviewedPlan planDetailsList attachmentList等引入的组件名 changeViewFun 是用来切换组件的方法通过给is绑定的currentView来实现切换组件 pathUrl就是当前的路由 <template>
详解vue 模版组件的三种用法

本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&
如何理解Vue的render函数的具体用法

本文介绍了如何理解Vue的render函数的具体用法,分享给大家,具体如下: 第一个参数(必须) - {String | Object | Function} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>render</title> <script src="https://cdn.b
详解vue mixins和extends的巧妙用法

vue提供了mixins.extends配置项,最近使用中发现很好用. 混合mixins和继承extends 看看官方文档怎么写的,其实两个都可以理解为继承,mixins接收对象数组(可理解为多继承),extends接收的是对象或函数(可理解为单继承). 继承钩子函数 const extend = { created () { console.log('extends created') } } const mixin1 = { created () { console.log('mixin1
vue基础之模板和过滤器用法实例分析

本文实例讲述了vue基础之模板和过滤器用法.分享给大家供大家参考,具体如下: 一.模板 {{msg}} 数据更新模板变化 {{*msg}} 数据只绑定一次 {{{msg}}} HTML转意输出 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net vue模板</title> <s
vue基础之事件v-onclick="函数"用法示例

本文实例讲述了vue基础之事件v-onclick=函数用法.分享给大家供大家参考,具体如下: v-on:click/mouseout/mouseover/dblclick/mousedown..... 事件: v-on:click="函数" v-on:click/mouseout/mouseover/dblclick/mousedown..... new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','orange','pear'
vue计算属性get和set用法示例

本文实例讲述了vue计算属性get和set用法.分享给大家供大家参考,具体如下: 计算属性是什么:vue文档里是这么说的,模板中绑定太多的逻辑会让模板过重且难以维护. 换句话说,就是可以自己设置值(b值),这个值和data下定义的值(a值)存在某些关系,b的值是基于a的值,通过某些逻辑产生出来的值,b值可以直接拿到template里去用.当a的值发生变化的时候,b的值会跟着变化.就是计算属性中的默认值get.那set又是什么鬼? b的值是基于a的变化而变化的,那么直接修改b的值的时候,会怎么样?