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