对于vue中数据响应式原理说法,vue的响应式原理和数据绑定
本文主要介绍vue数据响应的相关资料，有助于你更好的理解和学习Vue框架的使用。感兴趣的朋友可以了解一下。
在谈数据响应之前，我们要解决一个很重要的问题，那就是Vue对数据做了什么？让我们从getter和setter开始。我们用它们来读写虚拟属性。
getter和setter
有以下代码
设obj0={
姓氏：高，
姓名：渊源，
年龄：18岁
};
//需求一，获取名称
设obj1={
姓氏：高，
姓名：渊源，
Name () {
归还这个。姓这个。名字；
},
年龄：18岁
};
Console.log(要求1: obj1。name())；//高圆圆
这个时候我们日志的结果是高圆圆，大家都可以理解，但是名字后面的括号可以删掉吗？不，因为它是一个函数，所以我们怎么去掉括号呢？这是我们的要求。
//要求2，名称可以不带括号获取。
设obj2={
姓氏：高，
姓名：渊源，
Get name () {
归还这个。姓这个。名字；
},
年龄：18岁
};
Console.log(要求2: obj2。姓名)；//高圆圆
此时我们使用getter，不用括号就可以得到值。那我们怎么改这个名字呢？
//要求三：名字会写
让obj3={
姓氏：高，
姓名：渊源，
Get name () {
归还这个。姓这个。名字；
},
集合名称(xxx){
这个。姓氏=xxx[0]
这个。name=xxx.slice(1)
},
年龄：18岁
};
Obj3。Name=高圆圆
Console.log(`需求三：姓氏${obj3。姓氏}，名字${obj3。名字} `)//高圆圆
Get有set，setters就是这么用的。我们用属性值=xxx触发set函数，名字就可以写了。但是，如果我们在要求三中键入console.log(obj3 ),我们将得到下图：
为什么这个名字： (.)出现如图？其实这是一个get set，浏览器打印出来的名字： (.)当它显示这个名称时。这说明我们可以读写需求3中的名称，但是没有名为name的属性，但是有get和set来模拟对名称的操作。
Object.defineProperty
在上面的例子中，我们在定义对象的时候直接使用了get和set，但是如果对象已经被声明了，那么如何继续添加get呢？我们将使用Object.defineProperty或需求三。我们可以通过添加以下代码在定义后添加get和set:
var _xxx=0
Object.defineProperty(obj3， xxx ，{
get(){
return _xxx
},
设置(值){
_xxx=值
}
})
接下来，我们可以解决最初的问题：Vue对数据做了什么？让我们来看一些例子：
让数据0={
n: 0
}
首先声明一个数据0。需求1:用Object.defineProperty定义n:
让数据1={}
Object.defineProperty(数据1， n ，{
值：0
})
Console.log(`要求一：${data1.n}`)//要求一：0
二：n不能小于0:
让数据2={}
2._ n=0//_ n用于秘密存储n的值，默认为0。
Object.defineProperty(data2， n ，{
get(){
归还这个。_n
},
设置(值){
if(值0)返回
这个。_n=值
}
})
Console.log(`要求2: ${data2.n}`)//0
data2.n=-1
console . log(` Requirement 2:$ { data 2 . n }设置为-1时失败)//0设置为-1时失败。
data2.n=1
console . log(` Requirement 2:$ { data 2 . n }设置为1成功`)//0设置为1成功。
但是如果对方直接用data2呢？_n？我们可以不公开任何可以在对象上访问的内容吗？这就是我们要使用代理的时候：
let 3=proxy({ data:{ n:0 } })//括号中有一个匿名对象，无法访问。
函数代理({data}){
const obj={}
//这里的‘n’写死了。理论上，数据的所有键都应该被遍历。这里简化一下。
//因为我怕你听不懂。
Object.defineProperty(obj， n ，{
get(){
返回数据. n
},
设置(值){
if(值0)返回
data.n=值
}
})
返回obj //obj是代理
}
//数据3是对象
Console.log(`要求三：$ {data3.n } `)
数据3.n=-1
Console.log(`要求三：${data3.n}，设置为-1会失败`)
data3.n=1
Console.log(`要求三：${data3.n}，设置为1成功`)
但是如果你不想用代理，你该怎么办？
让我的数据={n:0}
let 4=proxy({ data:my data })//括号中有一个匿名对象，无法访问。
//数据3是对象
console . log(` level essence:$ { data 4 . n } `)//0
myData.n=-1
console . log(` level essence:$ { data 4 . n })未能将其设置为-1！`)
这样现在还能更改myData，所以我们还有一个要求：即使用户未经授权修改myData，也要拦截：
让我的数据5={n:0}
let 5=proxy 2({ data:my data 5 })//括号是匿名对象，不能访问。
函数代理2({data}){
//这里的‘n’写死了。理论上，数据的所有键都应该被遍历。这里简化一下。
value=data . n//保存起始n
Object.define属性(data， n ，{//声明一个新的n
get(){
返回值
},
set(newValue){
if(newValue0)返回
值=新值
}
})
只要加上上面的话，就会监测到数据。
const obj={}
Object.defineProperty(obj， n ，{
get(){
返回数据. n
},
设置(值){
if(value0)return//这句话是多余的。
data.n=值
}
})
返回obj //obj是代理
}
//数据3是对象
console . log(` demand five:$ { data 5 . n } `)//0
我的数据5.n=-1
Console.log(`要求五：${data5.n}，设置为-1失败`)//0
myData5.n=1
Console.log(`要求五：${data5.n}，设置为1成功`)//1
当我们编写vm=new Vue({data:myData})时，Vue做两件事：
让vm成为myData的代理，你可以通过这个访问vm。
将监视myData的所有属性。为了防止myData的属性改变，vm不知道它。知道属性变化后，它可以调用render(data)，UI可以自动刷新。
然后我们可以回到标题。什么是数据响应性？如果一个物体能够对外界刺激做出反应，那么它就是有反应的。Vue的数据有响应，const VM=new Vue({ data:n:0 } })。在这段代码中，如果修改vm.n，那么UI中的N也会相应地更新。Vue通过Object.defineProperty实现数据响应。
什么是响应式网页？也就是说，如果你改变了窗口的大小，网页的内容也会随之改变，那么这个网页就叫做响应式网页。
以上是Vue数据响应性的详细总结。更多关于Vue数据响应的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。