Vue之this.$set Vue.set

最新推荐文章于 2022-10-20 11:32:43 发布

浅仓南

最新推荐文章于 2022-10-20 11:32:43 发布

阅读量345

点赞数

分类专栏：前端 Vue 文章标签： Vue this.$set

本文链接：https://blog.csdn.net/weixin_40741265/article/details/103486820

版权

11 篇文章 1 订阅

订阅专栏

4 篇文章 0 订阅

订阅专栏

列表渲染，对数组的操作（增删改查）有三种方式可以实现页面即时更新：1.利用数组的变异方法（pop,push,shift,unshift,sort,reverse,splice） 2.改变数组的引用地址 3.通过使用全局变量Vue.set（数组名，属性，属性值）

对对象的操作，两种方式实现页面更新：1.改变对象的引用地址 2.通过使用Vue.set或者vue.$set方法。

注意：通过数组下标更改或者赋值，无法实现即时更新页面。

列表渲染时，如果存在双for循环，外边可以嵌套<template>模板占位，但是在HTML中没有影响。

vuejs 在初始化实例时，会将属性转换为setter、getter方法，所以属性必须在data对象上才能让vue.js转换它。

this.$set(this.data,'key','value')
data() {
    return {
    }
}

this.$set 不能动态添加根级响应式属性。

Vue.set(app.data,'key','value')
data:{
}

源码分析：

this.$set  ===> Vue.prototype.$set = set 
Vue.$set ===> Vue.$set = set
//区别在于，this.$set set函数绑定到Vue原型上
//Vue.$set set函数绑定到Vue构造函数上

关注