vue.set方法和直接赋值有什么区别

时间: 2023-12-11 12:03:04 浏览: 155

【JavaScript源代码】Vue.set()和this.$set()使用和区别.docx

Vue.set()和this.$set()使用和区别　　在我们使用vue进行开发的过程中，可能会遇到一种情况：当生成vue实例后，当再次给数据赋值时，有时候并不会自动更新到视图上去；当我们去看vue文档的时候，会发现有这么一句话：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。如下代码，给 student对象新增 age 属性　　data () {　　 return {　　 student: {　　 name: '',　　 sex: ''　　 }　　 }　　}　　mounted () { // ——钩子函数，实例挂载之后　　 this. Vue.js 是一款流行的前端框架，用于构建用户界面。在 Vue 开发过程中，有时我们需要修改数据并期望视图能够随之更新。然而，Vue 的响应式系统并非对所有数据修改都能自动响应。这涉及到Vue.set()和this.$set()这两个方法，它们在处理非原始数据类型（如对象）的动态属性时起着关键作用。 Vue.set()和this.$set()的主要用途是在Vue实例创建后，添加或修改数据对象的属性，并确保这些变更能够被Vue的响应式系统检测到，从而更新对应的视图。这两种方法的使用场景和区别如下： 1. **Vue.set()**： - 可以用来修改Vue实例根级别的数据，也可以用于嵌套对象的属性。例如： ```javascript const app = new Vue({ data: { a: 1, info: { name: '小明' } } }); Vue.set(app.data, 'b', 2); // 添加根属性 Vue.set(app.info, 'sex', '男'); // 添加嵌套属性 ``` - Vue.set()是Vue构造函数的一个静态方法，可以直接通过Vue实例或Vue构造器调用。 2. **this.$set()**： - 这个方法是Vue实例的一个成员，通常在Vue组件内部使用。它的功能和Vue.set()相同，但直接与当前Vue实例关联。 ```javascript new Vue({ data: { student: { name: '', sex: '' } }, mounted() { this.$set(this.student, 'age', 24); // 组件内添加属性 } }); ``` - this.$set()在组件内部方便地访问，无需通过Vue构造器。 **实现原理**： Vue.set()和this.$set()都调用了同一核心方法——`set`，该方法位于`../observer/index`模块中。它们之间的差异仅在于调用方式，Vue.set()直接引用set，而this.$set()是通过原型链将set绑定到Vue实例上。 **注意事项**： - **响应式属性的添加**：在Vue实例创建后，如果尝试直接给实例添加新的属性，例如`this.student.age = 242`，Vue的响应式系统无法检测到这个变更，因此视图不会更新。正确的做法是使用Vue.set()或this.$set()。 - **根级响应式属性**：Vue不支持动态添加根级响应式属性。如果试图在实例创建后添加新的根属性，如`Vue.set(app, 'newProp', value)`，Vue将不会响应这个改变。 - **数组和对象的处理**：对于数组，Vue可以通过索引直接修改元素，比如`array[index] = newValue`，这将会触发响应式更新。但是，如果添加新的数组元素，如`array.push(newItem)`，Vue能检测到数组长度的变化，但不能监听新添加的元素。因此，对于数组的动态添加，依然推荐使用Vue.set()或this.$set()。总结来说，Vue.set()和this.$set()是用来解决Vue中对象属性动态添加时的响应性问题。在开发中，当需要确保数据变化能够反映到视图上时，应优先考虑使用这两个方法。了解它们的工作原理和正确使用方法，能够避免出现预期外的视图更新问题，提高Vue应用的健壮性和用户体验。

vue.set方法是用来添加响应式属性的，而直接赋值不会添加响应式属性。在Vue实例中，只有已经声明过的data属性才会被响应化，如果需要动态添加属性并且希望这个属性也是响应式的，就需要使用vue.set方法。另外，vue.set方法还可以在数组中添加元素并保持数组的响应式。直接赋值则不具备这些特性。

阅读全文

vue.set方法和直接赋值有什么区别

相关推荐

Vue.js前端管理模板4.4.0版本发布

Vue.js响应式原理详解及实战示例

vue.js实现数据动态响应 Vue.set的简单应用

从vue源码解析Vue.set()和this.$set().docx

Vue.set 方法原理

浅谈Vue.set实际上是什么

Vue.set()实现数据动态响应的方法

Vue.set 全局操作简单示例

vue.js get和set方法使用

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

Vue.set()动态的新增与修改数据,触发视图更新的方法

vue.js中$set与数组更新方法

VUE2使用this.$set赋值

data: { a: 1 }Vue.set()将a：1改为a:2

vue.runtime.esm.js:3047 TypeError: Cannot read properties of undefined (reading 'style') at TableLayout.setHeight

this.$set vue 给data选项里面数组赋值

vue $set 给数据赋值的实例

Vue解决数组和对象变化不触发视图更新的方法

Vue.js面试深度解析：数据绑定与响应系统

最新推荐

Vue动态生成el-checkbox点击无法赋值的解决方法

vue 修改 data 数据问题并实时显示的方法

详解vue 数组和对象渲染问题

解决Vue2.x父组件与子组件之间的双向绑定问题

C语言数组操作：高度检查器编程实践

管理建模和仿真的文件

【KUKA系统变量进阶】：揭秘从理论到实践的5大关键技巧

如何使用Python编程语言创建一个具有动态爱心图案作为背景并添加文字'天天开心（高级版）'的图形界面？

基于Swift开发的嘉定单车LBS iOS应用项目解析

"互动学习：行动中的多样性与论文攻读经历"