vue全局修改message 的offset_理解vue实现原理，实现一个简单的Vue框架

最新推荐文章于 2024-06-27 10:54:59 发布

weixin_39969232

最新推荐文章于 2024-06-27 10:54:59 发布

阅读量1.8k

点赞数

文章标签： vue全局修改message 的offset

本文链接：https://blog.csdn.net/weixin_39969232/article/details/113323711

版权

本文深入探讨了Vue框架的实现原理，包括如何实现Observer来转化getter/setter，解决循环引用问题；详细讲解了Compiler如何解析DOM中的指令，并结合Observer和Watcher实现数据与视图的同步。此外，还讨论了在实现过程中遇到的问题和解决方案。

摘要由CSDN通过智能技术生成

其实对JS我研究不是太深，用过很多次，但只是实现功能就算了。最近JS实在是太火，从前端到后端，应用越来越广泛，各种框架层出不穷，忍不住也想赶一下潮流。
Vue是近年出的一个前端构建数据驱动的web界面的库，主要的特色是响应式的数据绑定，区别于以往的命令式用法。也就是在var a=1;的过程中，拦截’=’的过程，从而实现更新数据，web视图也自动同步更新的功能。而不需要显式的使用数据更新视图(命令式)。这种用法我最早是在VC MFC中见过的，控件绑定变量，修改变量的值，输入框也同步改变。
Vue的官方文档，网上的解析文章都很详细，不过出于学习的目的，还是了解原理后，自己实现一下记忆深刻，同时也可以学习下Js的一些知识。搞这行的，一定要多WTFC(Write The Fucking Code)。

一、思考设计

其实这里的思考是在看过几篇文章、看过一些源码后补上的，所以有的地方会有上帝视角的意思。但是这个过程是必须的，以后碰到问题就会有思考的方向。
先看看我们想要实现什么功能，以及现在所具有的条件：
效果图如下：

使用Vue框架代码如下：

<html lang="en"><head>    <meta charset="UTF-8">    <title>MVVMtitle>head><body><script src="src/vue.js">script><div id="msg">    {
    {b.c}}这是普通文本{
    {b.c+1+message}}这是普通文本    <p>{
    {message}}p>    <p><input type="text" v-model="message"/>p>    <p>{
    {message}}p>    <p><button type="button" v-on:click="clickBtn(message)">click mebutton>p>div><script>    var vm = new Vue({
            el:"#msg",        data:{
                b:{
                    c:1            },            message:"hello world"        },        methods:{
                clickBtn:function(message){
                    vm.message = "clicked";            }        }    });script>body>html>

然后我们还知道一个条件，Vue的官方文档所说的：

把一个普通对象传给 Vue 实例作为它的 data 选项，Vue.js 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。这是 ES5 特性，不能打补丁实现，这便是为什么 Vue.js 不支持 IE8 及更低版本。

用这个特性实现这样的功能，我们需要做什么呢？

首先，

最低0.47元/天解锁文章

weixin_39969232

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue全局修改message 的offset_理解vue实现原理，实现一个简单的Vue框架

其实对JS我研究不是太深，用过很多次，但只是实现功能就算了。最近JS实在是太火，从前端到后端，应用越来越广泛，各种框架层出不穷，忍不住也想赶一下潮流。 Vue是近年出的一个前端构建数据驱动的web界面的库，主要的特色是响应式的数据绑定，区别于以往的命令式用法。也就是在var a=1;的过程中，拦截’=’的过程，从而实现更新数据，web视图也自动同步更新的功能。而...
复制链接

扫一扫