vue json对象转数组_vue的数据驱动原理及简单实现

今天一个朋友问题vue的数据驱动是什么？所以我给大家说说我理解的vue的数据驱动。1、首先从字面意思理解下：数据驱动? 什么是数据驱动？我理解就是通过控制数据的变化来改变某物或某事。2、Vue的数据驱动中，数据驱动什么？就是说物或者事是什么？这里的vue数据驱动的是视图也就是DOM元素让DOM的内容随着数据的改变而改变，这里视图（DOM）可以理解成上面的改变的某物或者某事
当我们知道vue数据驱动的字面意思的时候我们是不是在想vue是怎么实现数据驱动的呢？
首先我们看下下面的图片（我自己画的）

我不知道大家能不能看懂上面图片，说的通俗一点就有一个人（数据驱动）在监视一个叫（数据）的家伙，一旦这个家伙有任何举动他讲会告诉他的领导（视图DOM）,然后领导就会做出一些相应的变化；回到话题就是这个人(数据驱动)怎么监视的呢？又是怎么把这些情况反映给领导（视图DOM）的呢？首先我们定义一个数据：

data(){return {data1:new Object(),data2:new Array()}
}
//view 视图
<div>{{data1}}</div>
<div>{{data2}}</div>

我定义了一个对象和一个数组数据并且绑定到视图，然后我们改变一下data1和data2：

this.data1 = {a:2,b:3
}
this.data2 = [{name:'test',age:10},{name:'test1',age:11}
]

在vue中当改变数据的时候，视图中的数据也会相应改变。那到底中间做了什么呢？第一怎么监听数据变化?注意：vue的数组类型只允许下面方法操作数组才会触发视图更新：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

数据监听变化：先看vue的文档怎么说的：Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。对象必须是纯粹的对象 (含有零个或多个的 key/value 对)：浏览器 API 创建的原生对象，原型上的属性会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象。

2.png

vue说递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。这就是话不就是告诉我们他监听了data里面所有的数据吗？然后转换为getter/setter？这个时候是不是知道vue是怎么监听data数据啦？没有错vue监听data是通过defineProperty方法来监听的。
大家看一下下面的defineProperty如果做到监听对象变化的：

let data = {"a":null
};
Object.defineProperty(data,"a",{get:()=>{console.log('获取数据啦');},set:()=>{console.log('数据发生变化啦');}
})
//先回车在执行下面代码看变化
data.a;
//然后执行下面代码看变化
data.a = {b:1}

（大家可以复制到Google控制台进行测试下）

效果图.png

现在大家就应该知道vue数据监听怎么做了吧。（小提示：以后大家面试中如果被问题vue为什么不支持 IE8 及以下版本,你就可以说因为vue用了defineProperty方法来监听数据。因为defineProperty只支持IE9及以上版本浏览器）

defineProperty兼容性.png

知道怎么监听数据啦，就知道这个人是用什么方式来监视这个家伙啦（data数据）；然后就是怎么去告诉领导这个家伙（data数据）的变化啦；
（遗留问题：怎么去实现当真的数据变化去变化视图呢？大家是不是说可以操作dom啊，vue就不是直接操作DOM,这又是Vue一个神奇的地方那就是Virtual DOM（虚拟DOM树）。大家可以讨论这个问题。谢谢大家）

：：：皮一下

//直接操作dom
let data = {"a":null
};
Object.defineProperty(data,"a",{get:()=>{console.log('获取数据啦');},set:(value)=>{document.querySelector('#app').innerHTML = JSON.stringify(value);}
})

_ | _ | _ | _ | _ | _知识个人总结，有不对的地方希望大家提出来，大家共同进步。

vue json对象转数组_vue的数据驱动原理及简单实现相关推荐

DataTable转Json对象或数组
DataSet转Json DataSet.Table[0]先转为json字符串,然后再由字符串转为Json对象或数组 DataSet转json字符串 using Newtonsoft.Json;/// ...
Flutter Json对象和数组解析成实体类
1.解析json对象: 准备一个json 对象数据: String json="{"res": true, "age": 12, "Name ...
探讨Vue 数据监测原理-第五节-展开介绍 Vue中监测-【数组】数据的原理
文章目录探讨一下Vue 数据监测的原理本次探讨共的第五个章节第五节:展开介绍 Vue中监测-[数组]数据的原理 1. 案例 1.1. 页面案例 2. 数组形式|对象形式爱好的区别 2.1. 页面 ...
json vue 对象转数组_vue 基础入门（一）修改
vue基础入门(一) 1. 什么是vue Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标 ...
vue将json字符串转换为数组_json字符串、json对象、数组三者之间的转换
var Obj = JOSN.parse("cscac"); //将JSON字符串转换成JSON对象 var "cscac" = JSON.stringify( ...
c#json对象转数组_数组和对象的区别
数组和对象两者都可以用来表示数据的集合,曾一度搞不清楚"数组"(array)和"对象"(object)的根本区别在哪里. 有一个数组a=[1,2,3,4],还有 ...
json字符串、json对象、数组三者之间的转换
json字符串转化成json对象 // jquery的方法 var jsonObj = $.parseJSON(jsonStr) //js 的方法 var jsonObj = JSON.parse(j ...
json字符串、json对象、数组之间的转换
记录一下 json字符串转化成json对象 // jquery的方法 var jsonObj = $.parseJSON(jsonStr) //js 的方法 var jsonObj = JSON.pa ...
vue——json对象和json字符串的转换
一.JSON格式在JSON中,字符串必须用双引号包裹.JSON由若干key:value的格式的数据组成.其中key值必须为字符串,value可以为字符串.数字.对象.数组.布尔型.null.但val ...
【QT开发专题-天气预报】3. JSON 对象和数组
实现的 http 天气预报,整体效果如下: JSON 有两种数据格式 JSON 对象 JSON 数组规则:被大括号包裹的是 JSON 对象: 被中括号包裹的是 JSON 数组 1. JSON 数组 ...

vue json对象转数组_vue的数据驱动原理及简单实现

vue json对象转数组_vue的数据驱动原理及简单实现相关推荐

最新文章

热门文章