直接赋值点击后你想要显示在Vue中重新赋值就是改了数据页面也跟着更新了
作者：编程小白 |
发布时间：2025-06-30 |
一、直接赋值
直接赋值是简单粗暴的方法，就是直接用等号把值改了。就像这样：
```javascript
data() {
return {
message: 'Hello, Vue!'
};
}
```
在页面上，如果有个按钮，点击后你想要显示“Hello, World!”，你只需要：
```javascript
methods: {
changeMessage() {
this.message = 'Hello, World!';
}
}
```
在点击按钮后，就会直接更新显示内容。
二、使用Vue.set方法
有时候，直接赋值可能不管用，比如你想改一个嵌套的对象或者数组里的东西。这时候，你就要用到`Vue.set`了：
```javascript
new Vue({
el: '#app',
data: {
user: {
name: 'John Doe'
}
},
methods: {
updateName() {
this.$set(this.user, 'name', 'Jane Doe');
}
}
});
```
这样改了，不管你有多少层嵌套，视图都会更新。
三、使用this.$set方法
其实，`this.$set`就是`Vue.set`的另一种形式，它是在组件的上下文中使用的，看起来是这样：
```javascript
methods: {
updateAge() {
this.$set(this, 'age', 30);
}
}
```
这样调用，效果跟上面的一样。
四、为什么用这些方法
Vue的响应式系统不是万能的，有些时候它可能检测不到你的数据变化，比如你直接修改了对象属性的添加或删除。这时候，使用`Vue.set`或`this.$set`就能保证这些变化被响应式系统捕获到。
五、总结及建议
总的来说，直接赋值最适合简单的数据更新，而`Vue.set`和`this.$set`则适合更新嵌套的对象或数组。
建议：
- 简单数据更新时，直接赋值；
- 更新嵌套对象或数组时，使用`Vue.set`或`this.$set`；
- 了解Vue的响应式系统局限性，选择正确的方法来触发视图更新。
通过这些方法，你的Vue应用中的数据更新就能正确地反映在视图中，让用户的使用体验更好。
FAQs
1. 什么是Vue的重新赋值？
在Vue中重新赋值，就是改了数据，页面也跟着更新了。Vue的响应式系统会监控数据的变化，然后自动更新相关的DOM元素。
2. 如何在Vue中重新赋值？
- 使用Vue实例的方法，比如`Vue.set`；
- 使用`this.$set`方法；
- 使用Vue的计算属性。
3. 有哪些常见的场景需要重新赋值？
- 表单数据重置；
- 列表数据更新；
- 条件渲染切换；
- 动态样式变化。
这些场景都是我们在开发Vue应用时经常会遇到的需求。