Vue.js 手写简单MVVM

最新推荐文章于 2022-06-29 19:44:28 发布
最新推荐文章于 2022-06-29 19:44:28 发布
阅读量215 收藏
点赞数
分类专栏： Vue 文章标签： Vue MVVM defineProperty
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44420276/article/details/90600978
版权

前提是对Vue有一定的了解
摘自某教学网站的图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性定义器</title>
    <script type="text/javascript" src='vue.js'></script>
</head>
<body>
    <div id="app">

    </div>

    <script type="text/javascript">
        var model = {
            title:'test title'
        };
        var val = model.title;
        Object.defineProperty(model,"title",{
            get:function(){
                console.log("调用了getter");
                return val;
            },
            set:function(nval){
                console.log("调用了setter");
                val=nval;
            }
        })
        window.setTimeout(function(){
            model.title="一个人的朝圣之路";
            console.log(model.title);
        },1000);
    </script>
</body>
</html>

在这里插入图片描述
那Vue是怎么实现

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性定义器</title>
    <script type="text/javascript" src='vue.js'></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <ul>
            <li v-for ="item in users">{{item.name}}</li>
        </ul>
        <input type="text" v-model="name">
        <button @click = "addUser">添加</button>
    </div>

    <script type="text/javascript">

        var model = {
            name:'新用户',
            title:'Vue 项目',
            users:[{name:'刘备'},{name:'关羽'},{name:'张飞'}]
        };
        var vue = new Vue({
            el:'#app',
            data:model,
            methods:{
                addUser:function(){
                    this.users.push({name:this.name});
                    this.name="";
                }
            }
        })
	</script>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性定义器</title>
    <script type="text/javascript" src='vue.js'></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <ul>
            <li v-for ="item in users">{{item.name}}</li>
        </ul>
        <input type="text" v-model="name">
        <button @click = "addUser">添加</button>
    </div>

    <script type="text/javascript">
        
    var model = {
        title:'test title'
    };
    // Object.defineProperty(model,"title",{
    //     get:function(){
    //         console.log("调用了getter");
    //          return val;
    //     },
    //     set:function(nval){
    //         console.log("调用了setter");
    //         val=nval;
    //     }
    // })
    reactiveMVVM(model,"title");
    function reactiveMVVM(obj,key){

    var property = Object.getOwnPropertyDescriptor(obj, key);
        console.log(property)

    }
    </script>
</body>
</html>

在这里插入图片描述
虽然报错，但是可以推断出以前哪怕只是简单的赋值，都会有默认的定义器配置，比如上方图片截图，什么都没做处理，但是类型值都是true;在以下代码中设置默认定义器配置false,如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性定义器</title>
    <script type="text/javascript" src='vue.js'></script>
</head>
<body>
    <div id="app">
        <h1>{{title}}</h1>
        <ul>
            <li v-for ="item in users">{{item.name}}</li>
        </ul>
        <input type="text" v-model="name">
        <button @click = "addUser">添加</button>
    </div>

    <script type="text/javascript">
        
    var model = {
        title:'test title'
    };
    Object.defineProperty(model,"title",{
        configurable: false,
        enumerable: false,
        writable: false

    })
    reactiveMVVM(model,"title");
    function reactiveMVVM(obj,key){

    var property = Object.getOwnPropertyDescriptor(obj, key);
        console.log(property)

    }
    </script>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>属性定义器</title>
    <script type="text/javascript" src='vue.js'></script>
</head>
<body>
    <div id="app">
        <h1 id="title">{{title}}</h1>
    </div>

    <script type="text/javascript">
    var view = title;    
    var model = {
        title:'test title'
    };
    reactiveMVVM(model,"title",model.title);
    function reactiveMVVM(obj,key,val,customSetter){

    var property = Object.getOwnPropertyDescriptor(obj, key);
        // console.log(property)
   
    if (property && property.configurable === false) { //false就不能监听
      return
    }
    var getter = property && property.get;  //原生
    var setter = property && property.set;  //原生

      Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: true,
      get: function reactiveGetter () {
        var value = getter ? getter.call(obj) : val;
        // if (Dep.target) {
        //   dep.depend();
        //   if (childOb) {
        //     childOb.dep.depend();
        //     if (Array.isArray(value)) {
        //       dependArray(value);
        //     }
        //   }
        // }   //深度监测
        return value
      },
      set: function reactiveSetter (newVal) {
        var value = getter ? getter.call(obj) : val;
        /* eslint-disable no-self-compare */

        // 如果值相等，return 不做视图改变
        if (newVal === value || (newVal !== newVal && value !== value)) {
          return
        }
        /* eslint-enable no-self-compare */
        if (customSetter) {
          customSetter();
        }
        // #7981: for accessor properties without setter
        if (getter && !setter) { return }
        if (setter) {
          setter.call(obj, newVal);
        } else {
          val = newVal;
        }
        // childOb = !shallow && observe(newVal); //watcher
        // dep.notify();//通知
        view.innerText = val;
      }
     }
     )
    }
    </script>
</body>
</html>

在这里插入图片描述

Posden
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手写Vue.js响应式原理，实现一个自己的Vue响应式框架
鸭绒的博客
10-31 704
文章目录1.简述功能2.创建Vue3.Observer 实现响应式数据 1.简述功能 我们实现的一个带有响应式功能的简单Vue框架。 功能： 负责接收初始化的参数(options) 负责把data中的属性注入到Vue实例，转换成getter/setter 负责调用observer监听data属性中的变化 负责调用compiler解析指令/差值表达式 Vue类的结构： 前三个是Vue的属性，最后一个是Vue的方法,用于将data设置为setter/getter，并纳入Vue实例中。 项目初始结构： 2
手写一个简易Vue
tiandao451的博客
01-29 989
目录一、介绍二、前置知识观察者模式手写观察者模式三、简易版Vue整体结构VueObservercompilerDepwatcher 一、介绍 开一个坑先，Vue框架其实还算是蛮复杂的，所以决定先通过渐进式的方式实现一个最基础的Vue响应式功能，Vue其实基础功能简单来说就以下几点： 负责结构初始化的参数（选项） 负责把data中的属性注入到Vue实例，转化成getter、setter 负责调用observer监听data中的所有属性的变化 负责调用compiler解析指令、插值表达式 目前的todoLi
手写一套mvvm框架
uperficialyu的博客
01-28 763
1 MVVM是什么 MVVM 设计模式，是由 MVC、MVP 等设计模式进化而来。 M - 数据模型（Model），简单的JS对象 VM - 视图模型（ViewModel），连接Model与View V - 视图层（View），呈现给用户的DOM渲染界面 通过以上的MVVM模式图，我们可以看出最核心的就是ViewModel，它主要的作用：对View中DOM元素的监听和对Model中的数...
手写MVVM的实现原理
十九万里的博客
10-04 540
一、学习目标 了解object,definProperty vue2.0使用都是这个响应式的监听 手写并优化MVVM底层实现 实现v-text和v-model原理 二、 数据响应式 1数据响应式是什么 数据发生变化，我们可以马上知道，并且做一些事情，关键在于知道数据发生变化并做出对应的操作 2、如何实现一个数据响应 及区别 vue2.0 对象属性拦截：Object.defineProperty (原生js的方法) 全局拦截 vue3.0版本中：对象属性拦截 Proxy对象代理 部分拦截 两者实现响应式
Part3-1-3 Vue.js 响应式原理
m0_38066007的博客
06-23 180
1
手写一个Vue.js响应式框架
任性的wo的博客
07-23 630
准备工作 数据驱动 响应式的核心原理 发布订阅和观察者模式 github源码：https://github.com/HZhen/Vue-framework 数据驱动 数据响应式、双向绑定、数据驱动 数据响应式 数据模型仅仅是普通的JavaScript对象，而当我们修改数据时，视图会进行更新，避免了繁琐的DOM操作，提高开发效率 双向绑定 数据改变，视图改变；视图改变，数据也随之改变 我们可以通过v-model在表单元素上创建双向数据绑定 数据驱动是Vue最独特的特性之一 开
手写一个简易的MVVM
m0_45114231的博客
08-18 270
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
手写一个简单的MVVM模式
weixin_45740906的博客
07-14 190
index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
手写MVVM
ddwddw4的博客
12-29 166
大体思路 主要分为模板编译、数据劫持、观察者（包含发布订阅）三个部分 模板编译：获取vm实例里html模板，针对其中的字符串模板{{}}及v-指令进行“翻译”，写出其底层相应操作 数据劫持：遍历vm实例里data对象，为每个数据绑定setter和getter，触发get时将当前元素watcher推入订阅者数组，触发set时，如果值更新则通知订阅者更新数据 观察者：给数据对应的元素绑定一个观察者实例，并推入订阅者数组，当数据更新时发布订阅通知元素数据变化 具体模块 MVVM constr...
通过js去手写vue的双向数据绑定，以及从MVVM =＞双向数据绑定 =＞ 数据驱动 =＞ 响应式原理 =＞ Object.defineProperty整体理解
m0_52009348的博客
06-29 350
通过js去手写vue的双向数据绑定，以及从MVVM =>双向数据绑定 => 数据驱动 => 响应式原理 => Object.defineProperty整体理解
手写实现vue中mvvm原理
08-14
手写实现vue中mvvm原理
手写Vue源码实现MVVM的响应式原理以及数据的双向绑定
08-04
手写Vue源码实现MVVM的响应式原理以及数据的双向绑定 帮你理解什么是数据劫持 什么是发布者-订阅者模式 帮你理解Vue内部是如何实现的双向数据绑定 了解Observer Dep Watcher三者之间的关系
模拟 Vue 手写一个 MVVM
weixin_33697898的博客
07-24 198
原文出自：https://www.pandashen.com MVVM 的前世今生 MVVM 设计模式，是由 MVC（最早来源于后端）、MVP 等设计模式进化而来，M - 数据模型（Model），VM - 视图模型（ViewModel），V - 视图层（View）。 在 MVC 模式中，除了 Model 和 View 层以外，其他所有的逻辑都在 Controller 中，Controller...
《手写一个vue.js》文章笔记
a519991963的专栏
01-08 232
前言 引用文章: Vue.js 是如何实现 MVVM 的？ 上文中对mvvm的讲解很有一套,可以深读. 文章最后实现了vue.js. 自己手写了两遍,略做优化如下: compile.js 文件中 createHandleElement函数 删除xvue.js 中的proxydata代理函数. ps1: 强烈建议自己可以纯手打实现这个代码. 也建议深读一下,原作者写的注释很好. ps2: 作者在...
手写简易MVVM框架
hxy941025的博客
05-16 646
手写简易MVVM框架 参考视频：https://www.bilibili.com/video/BV1Ap411d7Ai?t=4815 demo文件夹下为视频版源码（根目录下为手写练习，可忽略） 实现结果：v-model双向数据绑定及{{}} 代码地址：https://github.com/hxy941025/-MVVM- 大体思路 主要分为模板编译、数据劫持、观察者（包含发布订阅）三个部分 模板编译：获取vm实例里html模板，针对其中的字符串模板{{}}及v-指令进行“翻译”，写出其底层相应操作 数
vue大括号里接受一个函数_vue源码探究（第四弹）
weixin_39797686的博客
12-12 177
vue源码探究（第四弹）结束了上一part的数据代理，这一部分主要讲讲vue的模板解析，感觉这个有点难理解，而且内容有点多，hhh。模板解析废话不多说，先从简单的入手。按照之前的套路，先举一个例子 ：<div id="test"> <p>{{name}}</p> </div> <script type="text/javascript" s...
纯手写——基于vue.js的购物车
weixin_41770018的博客
07-10 420
template&lt;template&gt; &lt;div class="all"&gt; &lt;div class="head"&gt; &lt;span&gt;购物车&lt;/span&gt; &lt;/div&gt; &lt;ul class="menu"&gt; &lt;li
手写VUE mvvm双向数据绑定
热门推荐
Alinachanchan的博客
08-09 1万+
当你打开这篇文章时，你肯定已经使用过vue，当你改变数据时，与之绑定的UI自动更新，当你触发一些表单元素时，与之绑定的数据也会自动更新。我刚开始学vue的时候对vue的双向数据绑定很好奇，所以今天我给大家实现一个简单的vue。 首先，你得明白为什么我们要使用双向数据绑定，在没有什么mvc，mvvm之前，当数据改变，我们总是需要手动通过id class等方式找到我们的DOM，手动的调用什么inne
Vue.js入门教程：MVVM框架对比与基础语法
"本文介绍了Vue.js的基础语法和常用指令，包括MVVM框架的比较以及Vue的相关网址。" 在前端开发领域，MVVM（Model-View-ViewModel）架构模式因其高效的双向数据绑定而广受欢迎。Vue.js作为其中的一员，以其简洁的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值