Vue中数据响应式的解决方案（相关API）

原创

于 2020-10-30 16:20:41 发布 · 1.1k 阅读

CC 4.0 BY-SA版权

Vue.js在面对JavaScript数组和对象的动态修改时，无法自动响应变化。对于对象，需要使用`Vue.set`或`$set`添加或删除属性以保持响应式；对于数组，直接修改元素或长度时，应使用`Vue.set`、`splice`或`length`属性。本文总结了在不同场景下如何正确操作数据以实现视图的实时更新。

Vue.set

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。造成在data上的数据无法响应式变化，无法响应式变化有以下3钟情况：

动态地为对象增加属性

	<template>
	<div>
		<input v-model.number="age">
		<button @click="test">更新</button><br>
		{
    
    { courses.name }} -- {
    
    {courses.sex}} -- {
    
    {courses.age}}
	</div>
</template>

<script>	
	export default {
		data() {
			return {
				courses:{ name: '张三' ,sex:"男"},
				age:""
			}
		},
		created() {
		
		},
		methods: {
			test(){
				this.courses.age = this.age
				console.log(this.courses)
			}
		},
	}
</script>

<style scoped>
</style>

点击更新后运行结果：
在这里插入图片描述
从控制面板上可以看到对象age已赋值，