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

Vue.set

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

1. 动态地为对象增加属性

   	<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>
   

   点击更新后运行结果：