一起来看看Vue的核心原理剖析


Posted in Vue.js onMarch 24, 2022

前言:

  • 相信大家阅读过很多关于Vue2的文章,我也阅读过很多,但是大部分文章介绍的都是如何在项目中进行应用,技术点如果使用,功能如何实现;
  • 今天小编为大家带来这篇Vue2的核心原理剖析就是为大家介绍我们常用的Vue2他是如何实现的核心内容,我们简单代码的背后究竟他做了哪些,让大家能够 知其然,知其所以然

学习目标:

  • 了解Object.defineProperty原理
  • 了解set、get关联使用
  • 了解数据反应到识图的过程
  • 了解视图更换如何影响数据
  • 掌握MVVM

Object.defineProperty

<script>
    // 1. 字面量定义
    let data = {
      name: 'aa'
    }
    data.name = 'bb' // 这种情况下我们并不能知道name属性发生了变化

    // 2. Object.defineProperty  
    let data1 = {}
    Object.defineProperty(data1, 'name', {
      // 当我们访问data1的name属性的时候自动调用的方法
      // 并且get函数的返回值就是你拿到的值
      get() {
        console.log('你访问了data1的name属性')
        return 'aa'
      },
      // 当我们设置修改name属性的时候自动调用的函数
      // 并且属性最新的值会被当成实参传入进来
      set(newValue) {
        console.log('你修改了data1的name属性最新的值为', newValue)
        // 这个位置 只要你修改了name属性就会得到执行
        // 所以如果你想要在name变化的时候 完成一些自己的事情
        // 都可以放到这里来执行
        // 1. ajax()
        // 2. 操作一块dom区域
      }
    })
    // 以上是js中对象定义的另外一种方案,可以在访问属性和设置属性的时候自动调用对应的函数
    // 访问属性:data.name  data['name']  
    // 设置属性:data.name = 'bb'  data['name'] = 'bb'
  </script>

 响应式的核心API   

get、set

<script>
    // let data = {
    //   name: 'aa'
    // }
    let data = {}
    let _name = 'aa'
    Object.defineProperty(data, 'name', {
      get() {
        console.log('你访问了data1的name属性')
        return _name
      },

      set(newValue) {
        console.log('你修改了data1的name属性最新的值为', newValue)
        _name = newValue
      }
    })
    // 问题产生的原因:get中直接返回了一个固定的值,并且set函数中新值拿到了但是没有做任何事情
    // 解决方案:通过声明一个中间变量,让get函数中return出去这个变量
    // 并且在set函数中把最新的值设置到这个中间变量身上,起到一个set和get操作的一个
    // 数据的效果
  </script>

数据反应到视图

数据的变化可以引起视图的变化(通过操作dom把数据放到对应的位置上去 如果数据变化之后就用数据最新的值再重新放一次)

方案一:命令式操作

1.document.querySelector(’#app’).innerText = data.name

2.set函数中重新执行一下document.querySelector(’#app’).innerText = data.name

方案二:声明式渲染

v-text指令的实现

<p v-text="name"></p>

核心逻辑:通过‘模板编译’找到标记了v-text的元素,然后把对应的数据通过操作domapi放上去

<div id="app">
   <p v-text="name"></p>
   <p></p>
 </app>

1.通过app根元素找到所有的子节点 (元素节点,文本节点…) -> dom.nodeChilds

2.通过节点类型筛选出元素节点 (p) -> nodeType 1元素节点 3文本节点

3.通过v-text找到需要设置的具体的节点 <p v-text></p>4.找到绑定了v-text标记的元素 拿到它身上所有的属性 id class v-text=“name”

5.通过v-text=“name” 拿到指令类型 ‘v-text’ 拿到需要绑定的数据的属性名 ‘name’

6.判断当前是v-text指令 然后通过操作domapi 把name属性对应的值放上去 node.innerText = data[name]

以上整个过程可以称作‘模板编译’

视图的变化反映到数据

input元素 v-model双向绑定
M -> V
V -> M

M -> V

1.通过app根元素找到所有的子节点 (元素节点,文本节点…) -> dom.nodeChilds

2.通过节点类型筛选出元素节点 (p) -> nodeType 1元素节点 3文本节点

3.通过v-text找到需要设置的具体的节点 <p v-text></p>4.找到绑定了v-text标记的元素 拿到它身上所有的属性 id class v-text=“name”

5.通过v-model=“name” 拿到指令类型 ‘v-model’ 拿到需要绑定的数据的属性名 ‘name’

6.判断当前是v-model指令 然后通过操作domapi 把name属性对应的值放上去node.value = data[name]

v-model和v-text除了指令类型不一致,使用的dom api不一致 其它的步骤是完全一致的

V -> M

本质:事件监听在回调函数中拿到input中输入的最新的值然后赋值给绑定的属性

node.addEventListener('input',(e)=>{
   data[name] = e.target.value
 })

以上总结:

1.数据的响应式

2.数据变化影响视图

3.视图变化影响数据

4.指令是如何实现的(常规实现逻辑)

优化工作:

1.通用的数据响应式处理

data(){
       return {
          name:'cp',
          age:28
      }
   }

基于现成的数据,然后都处理成响应式 

Object.keys(data) // 由所有的对象的key组成的数组
    Object.keys(data).forEach(key=>{
      // key 属性名
      // data[key]  属性值
      // data 原对象
      // 将所有的key都转成get和set的形式
      defineReactive(data,key,data[key])
    })
    function defineReactive(data,key,value){
      Oject.defineProperty(data, key, {
        get(){
          return value
        },
        set(newValue){
          value = newValue
        }
      })
    }

2.发布订阅模式

问题:

<div>
      <p v-text="name"></p>
      <p v-text="name"></p>
      <div  v-text="age"></div>
    </div>

name发生变化之后 我需要做的事情是更新俩个p标签,而现在不管你更新了哪个数据,所有的标签都会被重新操作赋值,无法做到精准更新

解决问题的思路:

1.数据发生变化之后最关键的代码是什么?

node.innerText = data[name]

2.设计一个存储结构

每一个响应式数据可能被多个标签绑定 是一个‘一对多’的关系

{
        name: [()=>{ node(p1).innerText = data[name]},()=>{ node(p2).innerText = data[name]}...]
      }

发布订阅(自定义事件) 解决的问题就是 ‘1对多’的问题

实现简单的发布订阅模式:

浏览器的事件模型

dom.addEventLister(‘click’,()=>{})

只要调用click事件,所有绑定的回调函数都会执行 显然是一个1对多的关系

const Dep = {
      map:{},
      collect(eventName,fn){
        // 如果从来没有收集过当前事件就先初始化成数组
        if(!this.map[eventName]){
          this.map[eventName] = []
        }
        // 已经初始化好了就直接往里面push添加
        this.map[eventName].push(fn)
      },
      trigger(eventName){
        this.map[eventName].forEach(fn=>fn())
      }
    }

使用发布订阅模式优化现存问题

先前的写法 不管是哪个数据发生变化我们都是粗暴的执行一下compile函数即可

现在的写法 我们在compile函数初次执行的时候 完成更新函数的收集 然后在数据变化的时候

通过数据的key找到相对应的更新函数 依次执行 达到精准更新的效果

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!  

Vue.js 相关文章推荐
vue-drawer-layout实现手势滑出菜单栏
Nov 19 Vue.js
Vue3+elementui plus创建项目的方法
Dec 01 Vue.js
用vue设计一个日历表
Dec 03 Vue.js
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
vue中使用echarts的示例
Jan 03 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue实现可拖拽的dialog弹框
May 13 Vue.js
Vue Element UI自定义描述列表组件
May 18 Vue.js
vue-cropper插件实现图片截取上传组件封装
May 27 Vue.js
vue项目proxyTable配置和部署服务器
Apr 14 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 22 #Vue.js
关于Vue中的options选项
Mar 22 #Vue.js
vue+echarts实现多条折线图
vue使用echarts实现折线图
浅谈Vue的computed计算属性
VUE中的v-if与v-show区别介绍
Mar 13 #Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 #Vue.js
You might like
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
PHP设计模式之组合模式定义与应用示例
2020/02/01 PHP
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
extJs 常用到的增,删,改,查操作代码
2009/12/28 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
javascript 进阶篇2 CSS XML学习
2012/03/14 Javascript
jQuery :first选择器使用介绍
2013/08/09 Javascript
Javascript发送AJAX请求实例代码
2016/08/21 Javascript
vue.js中Vue-router 2.0基础实践教程
2017/05/08 Javascript
vue-cli3.0使用及部分配置详解
2018/08/29 Javascript
详解使用React.memo()来优化函数组件的性能
2019/03/19 Javascript
微信小程序实现手势滑动卡片效果
2019/08/26 Javascript
JS实现前端动态分页码代码实例
2020/06/02 Javascript
python的else子句使用指南
2016/02/27 Python
python目录与文件名操作例子
2016/08/28 Python
python脚本监控Tomcat服务器的方法
2018/07/06 Python
Python设计模式之命令模式原理与用法实例分析
2019/01/11 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
树莓派使用python-librtmp实现rtmp推流h264的方法
2019/07/22 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
Waterford加拿大官方网站:世界著名的水晶杯品牌
2016/11/01 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
中文系师范生自荐信
2013/10/01 职场文书
会计实习生自我鉴定
2013/12/12 职场文书
项目管理计划书
2014/01/09 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
化妆品店促销方案
2014/02/24 职场文书
黑白记忆观后感
2015/06/18 职场文书
七一表彰大会简报
2015/07/20 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
个人销售励志奋斗口号
2019/12/05 职场文书
导游词之泰山玉皇顶
2019/12/23 职场文书
微信小程序结合ThinkPHP5授权登陆后获取手机号
2021/11/23 PHP
Windows Server 2008配置防火墙策略详解
2022/06/28 Servers