vue3.0双向绑定原理,vue模板解析原理

vue双向数据绑定原理1、原理vue双向数据绑定是通过数据劫持与发布订阅模型相结合的方式来实现的。 也就是说，这是一个数据与视图同步、数据发生变化，当想要追随数据时，数据也发生变化的核心。 关于vue的数据绑定，其核心介绍Object.defineProperty (用方法介绍object.defineprty )

)1) object.defineproperty(obj，prop，descriptor )在此语法中有三个参数，每个参数都是obj )定义对象(prop )或要修改的属性

)简单来说，就是用这种方法定义值。 调用使用其中的get方法，并为此属性赋值后，其中的set方法var obj={ } object.define property (obj，' hello )、{ get:function 方法的值为' newval ) }； obj.hello； //'get方法' obj.hello='hi '； 调用了//set方法。 方法的值为hi'2。 让我们先简单地实现js双向数据绑定，熟悉一下此方法： doctypehtmlhtmllang=' en ' headmetacharset=' utf-8 ' metaname=' viewport ' 初始比例=1.0 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title document/title/headbodydiv //提供初始值的object.defineproperty(obj，' val )、{//要修改的对象的属性get: function ) { return val；set:function(newval ) { val=newVal； //val定义了修改后的内容document.getelementbyid('a ' ).value=val； //将文本框的内容转换为valdocument.getelementbyid(b ) ).innerHTML=val； span内val } }； 在document.addevent listener (' keyup '，function(e ) /文本框中键入时，对象定义的val在文本框中的值obj.val=e.target.) 正如/script/html一样，我们可以实现js的双向数据绑定，并对这一方法有初步了解；

在此示例中，当文本框中输入的字符发生变化时，span将同时显示同一字符的内容。 这提供了model=view和view=model的双向绑定。

通过添加事件接收keyup来启动set方法，set在更改访问器属性的同时，还更改了dom样式，并更改了span标记中的文本。

三、实现真正双向绑定的原理1.实现效果

首先，让我们看看vue双向数据绑定是如何进行的，以确定思维的方向

//vue divid=' app ' input type=' text ' v-model=' text ' { text } }/divscriptvarvm=newvue ({ El 3360 ' app )，

通过分割任务，我们的想法变得更加明确。

)1)将vue中data中的内容绑定到输入文本框和文本节点

)2)文本框的内容发生变化时，vue实例的data也同时发生变化

)3) data的内容发生变化时，输入框和文本节点的内容也发生变化

2.任务拆分

让我们先来看看文档碎片

文档）这个概念，你可以把他认为一个dom节点收容器，大方的冬日创造了10个节点，当每个节点都插入到文档当中都会引发一次浏览器的回流，也就是说浏览器要回流10次，十分消耗资源。
而使用碎片化文档，也就是说我把10个节点都先放入到一个容器当中，最后我再把容器直接插入到文档就可以了！浏览器只回流了1次。
注意：还有一个很重要的特性是，如果使用appendChid方法将原dom树中的节点添加到DocumentFragment中时，会删除原来的节点。

举个例子：
可以看到，我的app中有两个子节点，一个元素节点，一个文本节点
但是，当我通过DocumentFragment 劫持数据一下后

<div id="app"> <input type="text"> "hello world" </div> <script> var dom = nodeToFragment(document.getElementById('app')) console.log(dom)//看一下碎片化文档 console.log(document.getElementById('app'))//看一下被劫持后的app function nodeToFragment(node) { var fragment = document.createDocumentFragment() var child while (child = node.firstChild) { fragment.appendChild(child) } return fragment } </script>

注意：我的碎片化文档是将子节点都劫持了过来，而我的id为app的div内已经没有内容了。
同时要主要我while的判断条件。判断是否有子节点，因为我每次appendChild都把node中的第一个子节点劫持走了，node中就会少一个，直到没有的时候，child也就变成了undefined，也就终止了循环。

来实现内容绑定

我们要考虑两个问题，一个是如何绑定要input上，另一个是如何绑定要文本节点中。

这样思路就来了，我们已经获取到了div的所以子节点了，就在DocumentFragment里面，然后对每一个节点进行处理，看是不是有跟vm实例中有关联的内容，如果有，修改这个节点的内容。然后重新添加入DocumentFragment中。

首先，我们写一个处理每一个节点的函数，如果有input绑定v-model属性或者有{{ xxx }}的文本节点出现，就进行内容替换，替换为vm实例中的data中的内容

然后，在向碎片化文档中添加节点时，每个节点都处理一下。

创建Vue的实例化函数:

效果图如下：