1/30 Vue.js中的数据响应
问题
为什么data中的数据，不能动态显示到视图上呢？
我修改 num 为什么视图没得动静？ （ this.num 与 num 的区别 ）
var num = 1
data(){
return {
num:num
}
}
建议
看这个之前还是得简要了解一下生命周期，我之前也写了一点生命周期，可以有缘人小小小小的参考，有些许错，应该理解上没有大问题
https://www.cnblogs.com/WaterMealone/p/14336731.html
首先还是先总结
只有 data中本身定义了的变量，才会被加入数据响应系统
（ 1. 对象，必须初始化键值对 才能加入响应系统 obj = { } 是不行的，数组也是如此 ）
（ 2. 如果是对于原有对象新加入的属性 只有 $set 方法才能让该属性 加入数据响应系统 /* $set 不能作用于 $data 根节点 */ 个人不推荐$set 本来可以定义的非得要 $set 一下 ）
测试代码
1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Vue中的数据和方法</title> 7 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 8 </head> 9 10 <body> 11 <div id="app"> 12 <h1>{{title}}</h1> 13 <p>{{obj.profile}}</p> 14 <button @click="toggle">toggle</button> 15 </div> 16 </body> 17 18 <script> 19 var vm = new Vue({ 20 el:'#app', 21 data(){ 22 return{ 23 title : 'A VUE APP', 24 obj:{} 25 }}, 26 created () { 27 Object.assign(this.obj,{ 28 profile: "This is a Vue App." 29 }) 30 // 测试 this.$set(object, key, value) 这时加入了响应系统 31 // this.$set(this.obj, 'profile' , "This is a Vue App." ), 32 console.log('created',this.obj) 33 }, 34 mounted () { 35 Object.assign(this.obj,{ 36 profile: "This is a Vue test App." 37 }) 38 console.log('mounted',this.obj) 39 }, 40 beforeUpdate () { 41 console.log('beforeUpdate',this.obj) 42 }, 43 methods:{ 44 toggle(){ 45 // this.title = 1, 只要你加上这一语句，那么本不应该被刷新出来的obj.profile会被显示 46 47 // 其实解释这个事情还是很好解释的，用生命周期函数来想 48 // 首先obj对象 地址是合法的 只是没有属性 profile ， 49 // （ 1.那么只有本身在data中被实例化的数据段 才是被纳入 数据响应系统的 意思是以后如果没有其他数据更新 新添加的数据 是不会响应到页面的 ） 50 // （ 2.如果加入一个属性 profile 事情就会变成另外一个事情 ） 51 52 // obj在 created 的时候，只是被添加对象 profile : "This is a Vue App." 对象是被添加的，没有被纳入 响应系统中 53 // 在 mounted 时候，实例已经被绑定到了DOM节点上, 只是去根据数据渲染dom ， 从而得到 "This is a Vue App." 54 // 但是 mounted 后 修改了 其值 "This is a Vue test App." ，由于 obj.profile 没在响应系统中，所以没显示 55 // 同理 toggle 也是如此， 只是改变了obj.proflie 的值，因为响应系统没得这个东西，所以还是不会变 56 57 // 但是一旦刷新本来的 title 意味着 beforeUpdate 后 重新根据 data 渲染视图，其实本质上 profile还是孤儿 没有纳入数据响应系统 只是 58 // 被本来在响应系统中的 title给 带着走 罢了 59 Object.assign(this.obj,{ 60 profile: "This is a Vue App for test." 61 }) 62 console.log('toggle',this.obj) 63 } 64 } 65 }); 66 </script> 67 68 </html>
上面的代码是通过Object.assign 实现对对象添加、属性的 ， 有响应的函数和 大量的注释（狗头） 来给有缘人一个解释
这个 注释就说得比较清楚了，希望有缘人 如果有这方面的问题 还是借着我的代码 借着F12的魔法 来自己演示一遍
这个代码是由书中的例子的延伸，更好理解
有错误希望大佬指正
参考书籍
刘汉伟.Vue.js从入门到项目实战[M].北京:清华大学出版社,2019:61-63
Let it roll
