谈谈Vue.js引发的对getter和setter的思考

原因

当我打印出Vue实例下的数据对象中的属性时，我发现了一件有趣的事情：

它的每个属性都有两个对应的get和set方法，我觉得是多余的。我上网查了一下Vue双向绑定的实现原理，才发现和Angular.js双向绑定的实现原理完全不一样。Angular使用数据脏检测。当模型改变时，它将检测是否所有视图都与相关数据绑定，然后改变视图。Vue使用的发布-订阅模式是点对点绑定数据。

Vue的数据绑定只有两个步骤，编译=链接。

我一直在想vue是怎么听用户对Model的修改的，直到发现Vue数据中的每个属性都有设置和获取属性，我才明白。

在正常情况下，我们创建一个对象并修改其属性，如下所示：

var obj={ val :99 } obj . val=100；console.log(obj.val)//100没有问题，但是如果需要监控的话，当我修改这个对象的属性的时候，我就要做一些事情了。你会怎么做？

相关思维

这就是需要getter和setter的地方。

假设我现在想给code farmer对象添加一个name属性，每次更新name属性时，我都想完成一些事情。我们可以做到这一点：

var Coder=function() { var那=this返回{get name () {if (that。名称){返回那个。name}返回“你还没有命名它”}，Set name(val){ console.log('你把名字改成了' val ')that . name=val } } var isme=new coder()console . log(isme . name)isme . name='沈州' console . log(isme . name)console . log(isme。

你会发现这个对象的打印效果和顶部Vue中的数据对象一样，都有get和set属性。

让我们一步一步来分析上面的代码，非常有趣。

让我们首先创建一个对象文字：

var Coder=function(){ 0.}再次缓存：

变量=这个；接下来，也是最重要的，我们返回一个对象：

{ get name()}.}，集名(val){ 0.}}顾名思义，get是一个值，set是一个赋值。在正常情况下，我们使用obj.prop来获取和赋值，但是这样做有一个问题。我怎么知道一个对象的值变了？所以轮到布景了。

你可以把get和set理解为函数，但当然，你只能这样理解它们。这是两码事。

接下来，创建一个代码农民的例子，isMe；此时，isMe没有名称属性。当我们调用isMe.name时，我们将输入get name(){ 0.}，并首先判断isMe是否有名称属性。如果答案是否定的，那么添加一个name属性并为其赋值：‘你还没有给它命名’；如果有名称属性，则返回名称属性。

当你在这里看到get时，你必须知道如何使用它。是的，你可以把get想象成一个值函数，函数的返回值就是它得到的值。

当我为实例赋值时，我觉得set属性更重要：

IsMe.name='沈州'此时，您将输入集名(val){ 0.};形式参数val是我分配给名称属性的值。在这个功能中，我可以做很多事情，比如双向绑定！因为这个值的每一次改变都要经过set，其他方式改变不了，相当于一个通用监听器。

还有一种方法可以实现这个功能。

ES5对象原型有两个新属性__defineGetter__和__defineSetter__，专门用来绑定get和set到对象。

你可以这样写：

var Coder=Function(){ } Coder . prototype . _ _ defineGetter _ _(' name '，Function () {if (this。name){返回这个。name} else {return '你还没有命名' }})编码器。原型。_ _ define setter _ _(“name”，函数(val) {this。name=val })var isme=new coder()console . log(isme . name)isme . name='沈州' console . log(isme . name)console . log(isme)具有相同的效果，因此建议使用以下方法，因为它是写在原型上的。

摘要

以上就是本文的全部内容。希望这篇文章的内容对你的学习或工作有所帮助。有问题可以留言交流。