首页 > 编程语言 >Vue源码case

Vue源码case

时间:2023-01-25 01:24:14浏览次数:36  
标签:case 依赖 实例 DOM Vue Watcher 源码 视图

Object的变化侦测

1.封装可观测数据

通过Object.defineProperty方法实现了对object数据的可观测,并且封装了Observer类,能够方便的把object数据中所有属性(包括子属性)都转换成getter/setter的形式侦测变化。

2.封装依赖收集

依赖收集:在getter中收集依赖,在setter中通知依赖更新,以及封装了依赖管理器的Dep,用于存储收集到的依赖。

3.封装依赖(Watcher)

为每一个依赖都创建一个Watcher实例,当数据发生变化时,通知Watcher实例,由Watcher实例去做真实的更新操作。

  • Data通过observer转换了getter/setter的形式追踪变化。
  • 当外界通过Watcher读取数据时,会触发getter从而将Watcher添加到依赖中。
  • 当数据发生了变化时,会触发setter,从而向Dep中的依赖(即Watcher)发送通知。
  • Watcher接收到通知后,会向外界发送通知,变化通知到外界后可能搞会触发视图更新,也可能触发用户的某个回调函数等。

虚拟DOM

Vue是数据驱动视图的,数据发生变化视图就要随之更新,在更新视图的时候难免要操作DOM,而操作真实的DOM有事非常消耗性能的。用js计算性能来换取操作DOM的性能。

Vue实例生命周期

  • 初始化阶段:为Vue实例上初始化一些属性,时间以及响应式数据;
  • 模板编译阶段:将模板编译成渲染函数;
  • 挂载阶段:将实例挂在到指定的DOM上,即将模板渲染到真实的DOM中;
  • 销毁阶段:将实例自身从父组件中删除,并取消依赖追踪及事件监听器;

标签:case,依赖,实例,DOM,Vue,Watcher,源码,视图
From: https://www.cnblogs.com/zhenjianyu/p/17063738.html

相关文章

  • Vue 中 v-html 无法被 style scoped 渲染的问题
    假设有这么一个vue组件:<template><divv-html="docPreview"/></template><stylesrc="style.css"scoped></style>这样来说,div内的html的元素并不会受到c......
  • Informer源码学习记录之 "模型搭建build_model"
    一、初始化1.代码结构main_informer.py:  exp=Exp(args)#setexperimentsexp_basic.py:classExp_Informer(E......
  • vue
    vue目录前置知识:html、css、javascript、ajax一、Vue基础二、本地应用内容绑定v-textv-htmlv-on显示切换,属性绑定v-showv-ifv-bind列表循环v-forv......
  • vuejs从入门到精通——Vue语法——插值绑定
    Vue语法——插值绑定插值绑定是Vue中最常见的、最基本的语法。绑定的内容主要有文本插值和HTML插值两种。一、文本插值文本插值用双大括号{{}}将要绑定的变量、值......
  • vue 练手项目
    1.网易云项目Vue-NeteaseCloud-WebMusicApp哔哩哔哩giteegithubmusic播客......
  • 使用vite创建vue3 遇到 process is not defined
    今天新建项目遇到报错,查资料得出,需要在vite.config.js中添加代码如下import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'import{resolve}f......
  • vue2+SummerNote
    简介:想给加一个富文本编辑器到页面上,选择了summernote。接下来开始把summernote往vue这个框架里塞,死活塞不进去。最后把vue3回退到vue2,世界清净了。大致过程:下载相关包,引......
  • 【动画消消乐】HTML+CSS 自定义加载动画:清新折叠方块效果 063(附源码及原理详解)
    前言Hello!小伙伴!非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出~自我介绍ଘ(੭ˊᵕˋ)੭昵称:海轰标签:程序猿|C++选手|学生简介:因C语言结识编程,随后转入计算机专......
  • vue-cli之----按需忽略代码检查
    在项目中新建文件:.eslintignore  在文件中写需要忽略代码检查的路径,即可~例: ......
  • vue3 setup() 参数与使用
    setup(props,context)props:由父组件传入,并且声明过的值,且对应组件props属性上的类型定义context:1.attrs:等同于$attrs,组件外部传入但未声明的值(该值会存在于组件的根元......