【一文读懂】对 Vue 原理的理解-简易版（如何处理模版和指令、虚拟DOM、双向数据绑定+监听、怎么触发生命周期、nextTick简述）

最新推荐文章于 2025-06-02 00:42:51 发布
置顶 最新推荐文章于 2025-06-02 00:42:51 发布
阅读量1k 收藏 24
点赞数 20
CC 4.0 BY-SA版权
文章标签： vue.js 前端 学习 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_45613931/article/details/146509791

👉 个人博客主页 👈
📝 一个努力学习的程序猿

更多文章/专栏推荐：
HTML和CSS
JavaScript
Vue
Vue3
React
TypeScript
个人经历+面经+学习路线【内含免费下载初级前端面试题】
前端面试分享
前端学习+方案分享(VitePress、html2canvas+jspdf、vuedraggable、videojs)
前端踩坑日记（ElementUI）
【一文读懂】对闭包的理解及其衍生问题
【一文读懂】对原型链、事件循环、异步操作（Promise、async/await）、递归栈溢出的理解及其衍生问题

前言

在正式进入 Vue 系列内容之前，先简单描述下与 Vue 相关的基础原理。在面试过程中，鲜有面试官让我们聊 Vue 的底层原理。太复杂的源码逻辑，博主确实也不甚了解（下文中出现的代码，仅为展示，不代表 100% 为官方源码）。但是为了"应试"，或许本文的内容，对各位有所帮助。

1、vue

1.1 vue 前言-简述

我们先回顾一下，在 JS 中使用 Vue：

<div id="app"> 
  <input type="text" v-model="msg">
  <p>hello {{msg}}</p>
</div>
<script type="text/javascript">
  // 创建Vue示例
  const vm = new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
</script>

看到这个示例，如果看过我上一篇文章，就能发现，这不是妥妥的构造函数嘛！
https://blog.youkuaiyun.com/qq_45613931/article/details/145586439（构造函数 + 原型链）

那我们就可以先给一个简单到不能再简单的构造函数，用于下文的说明：

// 简化版的 Vue 构造函数
function Vue(options) {
    // 数据初始化
    this._init(options)
}

// Vue 在原型上定义的特殊属性（以 $ 开头，避免用户定义的数据属性与 Vue 内部属性命名冲突）
// 可以在 constructor 内初始化相关数据
Vue.prototype.$options = {
  el: '#app',
  data: function() {},
  methods: {},
  computed: {},
  watch: {},
  components: {},
  directives: {},
  filters: {},
  // 生命周期钩子
  created: function() {},
  mounted: function() {},
  // ... 其他选项
}
Vue.prototype.$data = {} // 数据
Vue.prototype.$props = {} // 属性
Vue.prototype.$el = {} // DOM 元素
// ... 其他属性

Vue.prototype._init = function(options) {
  const vm = this
  // mergeOptions 内，将用户选项覆盖到 Vue.prototype.$options中
  vm.$options = mergeOptions(
    vm.$options,  // 默认选项
    options || {},  // 用户传入的选项
    vm          // 实例自身
  )
}
// ….

1.2 Vue 处理模版和指令

有了上述的概念后，接下来说下 Vue 如何处理模版和指令（内部太复杂，以下为简述）。

（1）首先，在 init 内拿到 el，获取到对应 DOM 元素后，内部要做的事情，就是把这些 Vue 自己定义的语法，转成浏览器可以理解的方式。

所以第一步就是解析 => 将模版字符串转换为 AST（抽象语法树）。主要就是识别 Vue 的语法（v-if、v-for 等），并确保模版语法的正确性。

比如我有一个这样的结构：<input type="text" v-model="msg">，简易转化结果为：

// AST 结构示例（简易版）
{
  type: 1,
  tag: 'input',
  attrs: [
    {
      name: 'type',
      value: 'text'
    },
    {
      name: 'v-model',
      value: 'msg'
    }
  ],
  parent: null,
  children: []
}

（2）第二步：通过 AST 生成 render 渲染函数。调用它之后，生成虚拟DOM。比如（简易版）：

// 假设模板为：
// <div class="container">
//   <p>{{ msg }}</p>
//   <input type="text" v-model="msg">
//   <button @click="handleClick">Click</button>
// </div>

// Vue 2.x 生成的 render 函数（简易版）
function render() {
  const h = this._createVNode;
  const toString = this._toString;
  const model = this.msg;

  return h('div', 
    {
      staticClass: 'container' 
    },
    [
      // p 元素
      h('p', [toString(model)]),
      // input 元素
      h('input', {
	    // 指令信息
	    directives: [{
	      name: "model",
	      rawName: "v-model",
	      value: model,
	      expression: "msg"
	    }],
        attrs: { type: 'text' },
        domProps: { value: model },
        on: {
          input: ($event) => {
            if ($event.target.composing) return;
            this.msg = $event.target.value;
          }
        }
      }),
      // button 元素
      h('button', {
        on: {
          click: this.handleClick
        }
      }, ['Click'])
    ]
  );
}

// Vue 3.x 生成的 render 函数（简易版）
export function render(_ctx, _cache) {
  return _createVNode("div", {
    class: "container"
  }, [
    // p 元素
    _createVNode("p", null, [
      _ctx.msg
    ], 1 /* TEXT */),

    // input 元素
    _createVNode("input", {
      type: "text",
      "onUpdate:modelValue": $event => ((_ctx.msg) = $event),
      modelValue: _ctx.msg
    }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]),

    // button 元素
    _createVNode("button", {
      onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.handleClick(...args)))
    }, "Click")
  ])
}

createVNode 用来创建虚拟节点（内部逻辑较复杂）

toString 用来转化为文本

至此，就可以通过抽象的 AST 转化为可以用来生成虚拟 DOM 的 render 函数。
（为什么需要虚拟 DOM，详见 1.3 节）

（3）第三步：Vue 内部根据虚拟 DOM 去生成真实 DOM。最后的效果类似于：

<!-- 原始模板 -->
<input type="text" v-model="msg">
<!-- 相当于被转换为 -->
<input type="text"
       :value="msg"
       @input="msg = $event.target.value">

在 vue 项目中，vue-loader 就会做这样的事情，将 .vue 文件的每个部分（template、script、style）提取出来，并最后转化为浏览器能理解的方式。

（msg 双向绑定请看第 1.4 节）

Vue3.0 相对 Vue2.0 的优化点，可以参考我的文章（需要从文章内至少了解到，数据更新时，内部用到了diff算法）：
https://blog.youkuaiyun.com/qq_45613931/article/details/109470718

1.3 虚拟 DOM

回答上文的问题：为什么需要虚拟 DOM？直接生成真实 DOM，挂载到页面不可以吗？

首先，浏览器渲染引擎的大致工作流程为：

第一步，用HTML分析器，分析HTML元素，构建一颗DOM树。
第二步，用CSS分析器，分析CSS文件和元素上的样式，生成页面的样式表。
第三步，将DOM树和样式表，关联起来，构建一颗Render树。
第四步，有了Render树，浏览器开始布局，为每个Render树上的节点确定一个在显示屏上出现的精确坐标。
第五步，Render树和节点显示坐标都有了，就调用每个节点paint方法，把它们绘制出来。
最后通过浏览器复杂的渲染过程得到最终效果。

其中，当我们改变一个元素的尺寸位置属性时，会重新进行样式计算、布局、绘制以及后面的所有流程，这种行为被称为重排；

当我们改变某个元素的颜色属性时，不会重新触发布局，但还是会触发样式计算和绘制，这种行为被称为重绘。

因为我们拿到 AST 之后，最终还是要把它们转成正常的标签。如果我们直接根据 AST 生成真实 DOM，则浏览器会从构建 DOM 树开始，从头到尾执行一遍流程。假设在一次操作中，需要更新 10 个 DOM 节点，浏览器收到第一个 DOM 请求后并不知道还有 9 次更新操作，因此会马上执行流程，最终执行 10 次。极端情况下，第一次计算完，紧接着下一个更新请求还是操作这个 DOM 节点，就会浪费性能。

因此，虚拟 DOM 的好处就是：若一次操作中有多次生成 / 更新 DOM 的动作，虚拟 DOM 不会立即操作DOM。此时会将多次更新的内容保存起来（批量处理），最终将处理结果一次性挂到 DOM 树上，再进行后续操作，避免大量无谓的计算量。

1.4 Vue 数据的双向绑定

我们在 1.2 节通过解析 el 模版，得到了真实 DOM。从表现来看，input 已经实现了自给自足，似乎不需要双向绑定？还是看这个例子：

<!-- 原始模板 -->
<input type="text" v-model="msg">
<!-- 相当于被转换为 -->
<input type="text"
       :value="msg"
       @input="msg = $event.target.value">

<!-- 原始模板 -->
<p>hello {{msg}}</p>
<!-- 相当于被转换为 -->
<p>hello <span>msg的值</span></p>

在原始模版的情况下，{{ msg }} 转化为真实 DOM，是上面的结果。此时如果想在 input 的 msg 变化的情况下，调整 {{ msg }}，能想到的方法只能是这样做：

input.addEventListener('input', e => {
  msg = e.target.value
  // ❌ 问题：其他使用 msg 的地方不会自动更新
  // 需要手动更新所有相关的 DOM
  updateAllRelatedElements()
// document.querySelector('.xxx').textContent = msg
})

所以双向数据绑定不仅仅是处理输入和更新，更重要的是：自动依赖追踪。

首先，在 Vue.init （参考第 1.1 节构造函数）的时候，给每个 data 增加监听 Object.defineProperty（Vue 2.x）：

// 简化的响应式系统
class Dep {
  static target = null  // 静态属性，全局唯一

  constructor() {
    this.subs = []  // 存储依赖的 Watcher
  }
  
  depend() {
    if (Dep.target) {
      this.subs.push(Dep.target)
    }
  }
  
  notify() {
    this.subs.forEach(watcher => watcher.update())
  }
}

// 渲染 Watcher
class Watcher {
  constructor(vm, updateFn) {
    this.vm = vm
    this.getter = updateFn
    this.get() // 首次渲染
  }
  
  get() {
    // 设置当前 Watcher 为全局的活动 Watcher
    Dep.target = this
    // 执行更新函数，这会触发数据的 getter
    this.getter()
    // 清除当前 Watcher
    Dep.target = null
  }
  
  update() {
    // 数据变化时更新视图
    this.get()
  }
}

// 简化版的响应式实现
function defineReactive(obj, key, val) {
  // 依赖收集容器
  const dep = new Dep()
  
  Object.defineProperty(obj, key, {
    get() {
      // 收集依赖
      dep.depend()
      return val
    },
    set(newVal) {
      if (val === newVal) return
      val = newVal
      // 通知所有依赖更新
      dep.notify()
    }
  })
}

// 组件渲染时
function mountComponent(vm) {
  // 创建渲染 Watcher
  new Watcher(vm, () => {
    // 渲染函数执行，这里会访问响应式数据，触发 getter
    vm._update(vm._render())
  })
}

从上述简例，总结就是：

（1）在 vue.init 初始化执行到 $mount 阶段（详见第 1.6 节），在 render 每个组件时，调用 mountComponent，去创建 watcher。此时全局 Dep.target （指针）指向当前组件。在 Watcher 执行 this.getter() 期间，render 函数会访问对应响应式数据，从而触发 Object.defineProperty，收集到这个依赖。执行结束后 Dep.target = null。

另外：defineReactive 内的 const dep = new Dep() 形成了闭包，这就让后续每次数据更新，都能拿到初始化时的依赖结果。

闭包的内容可以参考我之前的文章：https://blog.youkuaiyun.com/qq_45613931/article/details/144483787

（2）随后，在 input 值发生变化时，触发 Object.defineProperty – set，通过 dep.notify 再次 render 所有依赖的组件，重新生成虚拟 DOM。

（3）接下来就是所谓的 vue-diff 算法出场的时间了。因为我们初始化已经生成了虚拟 DOM 树（并由此生成真实 DOM 树），我们需要只让页面更新有变化的 DOM 部分，所以需要找出有更新的节点，这就是 diff 算法做的事情。

综上，双向数据绑定流程结束。这就是 MVVM 模式：
在这里插入图片描述
数据绑定的流向：View -> Model 、Model -> View

在这里插入图片描述

1.5 Vue3.x 为什么改用 proxy

延续第 1.4 节，其实在使用 Object.defineProperty 时，会有以下局限性：

（1）无法监听新增或删除的属性。例如：

data() {
  return {
    a: '1'
  }
},
methods: {
  addProperty() {
    // ❌ 直接赋值不会触发响应式
    this.b = 2

    // ✅ 使用 Vue.set 手动添加响应式属性
    this.$set(this, 'b', 2)
  }
}

虽然 Vue 确实提供了一个可以更新的方法，为新增的属性定义 getter 和 setter，从而让其变成响应式。但个人理解不建议这么做。

（2）无法监听数组的索引和长度变化。例如：

const arr = [1, 2, 3]
arr[1] = 99 // 无法触发响应式更新
arr.length = 1 // 无法触发响应式更新

这也就是为什么之前经常会遇到：明明数组的数据更新，但页面不渲染的问题。从而转为使用 this.$set(this.arr, 1, 99) 或者 this.arr.splice(1) 等方式去触发数组更新。

（3）性能问题。对象的每个属性都需要通过 Object.defineProperty 单独定义才能使用。对于嵌套深层的对象，Vue2 会递归遍历每一层属性，初始化响应式，这在大数据量场景下性能较差。

（4）代码复杂性。上述也已经提到，为了解决上述问题，Vue2 引入了 Vue.set 等其他用法（Vue.delete）。在特定情况下的页面不渲染，让使用者也陷入了困惑。

综上，Vue3.x 改用 ES6 的 Proxy 后，问题迎刃而解：Proxy 会代理整个对象，不用单独劫持每个属性（性能提升），几乎能拦截所有操作（新增、删除、数组索引修改等）。

const obj = reactive({})
obj.newKey = 'value' // 自动响应式
delete obj.newKey // 自动响应式

const arr = reactive([1, 2, 3])
arr[1] = 99 // 自动响应式
arr.length = 1 // 自动响应式

function defineReactive(obj) {
  // 依赖收集容器
  const dep = new Dep()

  // 创建 Proxy
  return new Proxy(obj, {
    get(target, key) {
      // 收集依赖
      dep.depend()
      return target[key]
    },
    set(target, key, newVal) {
      if (target[key] === newVal) return true
      target[key] = newVal
      // 通知所有依赖更新
      dep.notify()
      return true
    }
  })
}

1.6 Vue 如何得知生命周期

在第 1.5 节，提到了 mountComponent。那么 Vue 是如何判断什么时间，去触发不同的生命周期函数呢？我们来补全初始的构造函数。

function Vue(options) {
  this._init(options)
}

class Dep {
  static target = null
 
  constructor() {
    this.subs = []  // 存储依赖的 Watcher
  }
  
  depend() {
    if (Dep.target) {
      this.subs.push(Dep.target)
    }
  }
  
  notify() {
    this.subs.forEach(watcher => watcher.update())
  }
}

function defineReactive(obj, key, val) {
  // 依赖收集容器
  const dep = new Dep()
  
  Object.defineProperty(obj, key, {
    get() {
      // 收集依赖
      dep.depend()
      return val
    },
    set(newVal) {
      if (val === newVal) return
      val = newVal
      // 通知所有依赖更新
      dep.notify()
    }
  })
}

class Watcher {
  constructor(vm, updateFn) {
    this.vm = vm
    this.getter = updateFn
    this.get() // 初次渲染
  }

  get() {
    Dep.target = this // 当前 Watcher
    this.getter() // 执行渲染函数
    Dep.target = null
  }

  update() {
    // 数据变化时触发
    queueWatcher(this) // 异步更新队列
  }

  run() {
    this.get() // 重新渲染
  }
}

function queueWatcher(watcher) {
  // 将 Watcher 放入队列
  nextTick(() => {
    callHook(vm, 'beforeUpdate ')
    watcher.run() // 执行更新
    callHook(vm, 'updated ')
  })
}

Vue.prototype._init = function(options) {
  const vm = this
  vm.$options = options
  
  // beforeCreate: 实例初始化之后，数据观测之前
  callHook(vm, 'beforeCreate')
  
  // 初始化 data、props、methods 等 => vue2.x 内部遍历 data，触发defineReactive
  initState(vm)
  
  // created: 数据观测完成，还未挂载
  callHook(vm, 'created')
  
  if (vm.$options.el) {
    vm.$mount(vm.$options.el)
  }
}

Vue.prototype.$mount = function(el) {
  const vm = this
  
  // beforeMount: 挂载之前
  callHook(vm, 'beforeMount')
  
  mountComponent(vm)
  
  // 注意：实际实现比这复杂，需要考虑子组件
  // mounted: DOM 挂载完成
  nextTick(() => {
    callHook(vm, 'mounted')
  })
}

// 组件渲染
function mountComponent(vm) {
  // 创建渲染 Watcher
  new Watcher(vm, () => {
    // 渲染函数执行，这里会访问响应式数据，触发 getter
    vm._update(vm._render())
  })
}

Vue.prototype.$destroy = function() {
  const vm = this
  
  // beforeDestroy: 实例销毁之前
  callHook(vm, 'beforeDestroy')
  
  // 清理依赖、事件监听器等
  vm._cleanup()
  
  // destroyed: 实例销毁完成
  callHook(vm, 'destroyed')
}

// 钩子函数调用器
function callHook(vm, hook) {
  const handlers = vm.$options[hook]
  if (handlers) {
    for (let i = 0; i < handlers.length; i++) {
      handlers[i].call(vm)
    }
  }
}

通过该简例，相信各位可以有个大概的理解，实际的逻辑处理比这些复杂的多。其实就是在特定的时机调用对应的钩子函数，并不是依赖 JS 提供的功能（实际上，也没有这样的 API）：

  • created: 数据初始化后
  • mounted: DOM 挂载后（通过 nextTick）
  • updated: 数据更新后（通过 Watcher）
  • destroyed: 手动调用 $destroy 时

通过简例，这里还有两个问题没有得到答案。

（1）nextTick 是如何实现的，为何此时调用 mounted 一定是 DOM 挂载完成。这将在第 1.7 节表述。

（2）调用 $destroy 的时机。

关于（2）调用 $destroy 的时机，举个例子（我们不去考虑显示调用 vm.$destroy() 的情况）：

new Vue({
  el: "#app",
  template: `
    <div>
      <child-component v-if="show"></child-component>
      <button @click="show = false">Destroy Child</button>
    </div>
  `,
  data: {
    show: true,
  },
});

在第 1.2 节我们知道，Vue 内部一定会把模版转化成 key-value 的形式，所以当 show 变为 false 时，虚拟 DOM 重新生成。通过 diff 算法检测到组件被销毁时，触发 vm.$destroy() 即可。Vue 项目内的 Vue Router 也是同理，都是能检测到的。

1.7 nextTick 简述

第 1.6 节遗留的问题：nextTick 是如何实现的，为何此时调用 mounted 一定是 DOM 挂载完成。

nextTick 相信各位并不陌生，我们经常在 Vue2.x 里用它来处理一些要在 DOM 更新完成后执行的回调任务。在 Vue 内部，道理也一样。

首先我们已经得知 render 函数内，做的是从虚拟 DOM 到真实 DOM 的过程。因为内部处理是同步的，且通过我之前的文章提到的事件循环（https://blog.youkuaiyun.com/qq_45613931/article/details/145586439），我们知道：

JS 是单线程执行的，执行时一定是：主线程代码先执行，执行过后，到事件队列中执行。在事件队列中，先去微任务队列中执行，没有微任务再去执行宏任务。

因此 nextTick 要做的事情，就是把回调任务放到宏任务或微任务队列中，此时前序已经同步的从虚拟 DOM 生成真实 DOM。所以在调用 mounted 的时候，DOM 已经挂载完成。

那 nextTick 内部的实现原理简单来看就是：

function nextTick(cb) {
	if (typeof Promise !== 'undefined') {
		// 优先使用 Promise
		return Promise.resolve().then(cb)
	} else if (typeof MutationObserver !== 'undefined') {
		// 次优先使用 MutationObserver
		let counter = 1
		const observer = new MutationObserver(cb)
		const textNode = document.createTextNode(counter)
		observer.observe(textNode, { characterData: true })
		textNode.data = counter = 2
	} else {
		setTimeout(cb, 0)
	}
}

1.8 Vue 项目 data 为什么是函数？

最后，还有这样一个常见问题。我们已知，在 JS 里，我们可以这样用：

new Vue({
  el: '#app',
  data: {
    count: 0
  }
});

为什么这里的 data 可以直接是一个对象：因为根实例通常只有一个，不存在复用的问题。在项目中，我们看一下：

<template>
  <MyComponent />
  <MyComponent />
</template>

当我们定义一个 Vue 组件时，Vue 会将组件的选项（如 data、methods 等）存储起来，作为组件“模版”。当在使用 <MyComponent /> 时，Vue 会根据这个模板创建组件实例。也就是说，如果 data 是一个对象：

const MyComponent = {
  data: {
    count: 0
  }
};

// Vue 内部创建组件实例时：
const instance1 = Object.create(MyComponent);
const instance2 = Object.create(MyComponent);

// 两个实例的 `data` 都指向同一个对象：
instance1.data === instance2.data; // true

但如果 data 是一个函数：

const MyComponent = {
  data() {
    return {
      count: 0
    };
  }
};

// Vue 内部创建组件实例时：
const instance1 = Object.create(MyComponent);
instance1.data = MyComponent.data(); // 调用 data 函数，生成新的对象

const instance2 = Object.create(MyComponent);
instance2.data = MyComponent.data(); // 再次调用 data 函数，生成新的对象

// 两个实例的 `data` 是独立的：
instance1.data === instance2.data; // false

此时，每次调用函数都会返回一个新的对象，从而避免了引用共享的问题。

Vue 原理整理
gxll499294075的博客
03-22 1万+
1. 组件化基础=>（MVVM模型） 传统组件，知识静态渲染，更新依赖于操作DOM。 Vue的核心理念是数据驱动的理念，所谓的数据驱动的理念：当数据发生变化的时候，用户界面也会发生相应的变化，开发者并不需要手动的去修改dom。 优点： 不需要在代码中去频繁的操作dom了，这样提高了开发的效率，同时也避免了在操作Dom的时候出现的错误。 Vue.js的数据驱动是通过MVVM这种框架来实现的，MVVM 框架主要包含三部分：Model, View, ViewMode 数据驱动视图...
一文带你读懂vue3中directive指令的那些事
Jinuss的博客
08-23 2735
理解vue3中的directive原理，源码分析
Vue原理
sun~的博客
11-09 962
Vue原理
从0开始学vue：一个.vue文件的完整组成部分与原理
最新发布
技术人集结地
06-02 1302
Vue单文件组件（.vue）将模板、脚本和样式封装在一个文件中，实现组件化开发。模板部分定义HTML结构，支持插值、指令和插槽；脚本部分处理逻辑，包含props、data、生命周期等；样式部分使用scoped属性实现组件级CSS。文件通过vue-loader编译为JavaScript模块，支持TypeScript和自定义块扩展。这种设计体现了Vue关注点分离的理念，配合构建工具和开发插件，优化了开发体验和性能。
Vue原理解析——自己写个Vue
weixin_33971977的博客
09-18 568
Vue由于其高效的性能和灵活入门简单、轻量的特点下变得火热。在当今前端越来越普遍的使用，今天来剖析一下Vue的深入响应式原理。 tips：转自我的博客唐益达博客，此为原创。转载请注明出处，原文链接 一、Vue对比其他框架原理 Vue相对于React，Angular更加综合一点。AngularJS则使用了“脏值检测”。 React则采用...
vue原理
前端-黎姿
03-31 2993
又看了好几篇文章，之前一直感觉迷迷糊糊的，看的多了，这些概念进入脑子里面多了慢慢就有感觉了，因此得出一个结论，一个问题不懂，看一篇博客不懂，两篇还是不懂，那就看看看，看一百篇可能还不能精通，肯定能说懂了。 先上一张看了几次的图片： Vue原理简介 Vue就是基于MVVM模式实现的一套框架，在vue中： Model:指的是js中的数据，如对象，数组等等。 View:指的是页面视图 viewMo...
【数据绑定】：一文读懂如何将本地数据集与百度地图ECharts图表绑定
[【数据绑定】：一文读懂如何将本地数据集与百度地图ECharts图表绑定](https://ucc.alicdn.com/pic/developer-ecology/009026adb4304cde95dc9d00a257c39e.png?x-oss-process=image/resize,h_500,m_lfit) # 摘要 ...
前端---【Vue2基础更新:一文看懂生命周期】
m0_61307468的博客
05-30 291
Vue里面的生命周期是什么，生命周期是什么意思，图解生命周期。生命周期分为三个阶段：挂载 、更新、销毁。beforeCreate 、created、beforeMount、mounted、beforeUpdate、beforeDestory、destroyed.这些调用钩子的地方。生命周期过程，首先是创建的一个new vue实例，然后对事件或者生命周期进行初始化。然后给VM注入数据或者，完成响应式的数据代理或者数据劫持是什么，图解生命周期。Vue里面的生命周期是什么，不会吧，还有人不知道生命周期
一文带你弄懂Vue八大生命周期钩子函数
你好呀，很高兴你在看这里~
06-12 2944
一. 我们把一个对象从生成（new）到被销毁（destory）的过程，称为生命周期。而生命周期函数，就是在某个时刻会自动执行的函数。
Vue3响应式原理那些事
独立开发，个人小站：ai-bar.cn，网站中还有最近开发得一个写作软件（竹记），欢迎体验交流
05-05 1674
Vue3 的双向响应式原理是其核心机制，通过Proxy代理与依赖收集系统实现数据与视图的自动同步
vue 原理
Luckyzhoufangbing的博客
12-15 1230
（一）vue 初始化对数据的处理 初始化用户传入data ----> 将数据进行观测 -----> 进行对象的处理 -----> 遍历对象 -----> 绑定监听 （1）将对象进行观测：会对数据进行判断，是【数组】还是【对象】 （观察者模式） 特点：观察者要直接订阅观察目标，观察目标一做出通知，观察者就要进行处理（这也是观察者模式区别于发布/订阅模式的最大区别） （2）进行对象的处理：对象遍历 第一遍 （遍历Object.keys()） （3）循环对象定义响应式变化：
VUE-原理解析
qq_27909209的博客
09-07 916
如果我们在 JavaScript 写类似的逻辑：当我们更改 A0 后，A2 不会自动更新。那么我们如何在 JavaScript 中做到这一点呢？let A2这个 update() 函数会产生一个副作用，或者就简称为作用，因为它会更改程序里的状态。A0 和 A1 被视为这个作用的依赖，因为它们的值被用来执行这个作用。因此这次作用也可以说是一个它依赖的订阅者。我们需要一个魔法函数，能够在 A0 或 A1 (这两个依赖) 变化时调用 update() (产生作用)。
Vue 原理详解
weixin_50361560的博客
11-29 1623
Vue.js 的工作原理分为多个部分，其中编译器、响应式系统和运行时是最核心的组成部分。通过编译器，Vue 将模板解析为渲染函数，并优化静态内容；通过响应式系统，Vue 能够高效地追踪数据变化，并在变化时更新视图；而在运行时，Vue 会处理 DOM 渲染和指令执行，使得组件能够根据数据自动更新。
Vue原理解析
fmk1023的博客
02-13 4177
VUE响应式原理
Vue基本原理
hsany330的专栏
06-14 8679
经过几天的研究，发现学习框架的底层技术，收获颇丰，相比只学习框架的使用要来的合算；如果工作急需，快速上手应用，掌握如何使用短期内更加高效；如果有较多的时间来系统学习，建议研究一下框架的等层技术、原理。 Vue、React、Angular三大框架对比 1、Vue Vue是尤雨溪编写的一个构建数据驱动的Web界面的库，准确来说不是一个框架，它聚焦在V（view）视图层。 它有以下的特性： 1.轻量级的框架 2.双向数据绑定 3.指令 4.插件化 优点： 简单：官方文档很清晰，比 Angul
vue实现原理？
geng1025的博客
11-15 567
当用户在表单元素中输入内容时，数据会自动更新；当数据发生变化时，视图也会自动更新。这种双向绑定机制简化了数据和视图的同步过程，避免了手动更新视图和处理用户输入的繁琐操作。综上所述，Vue的实现原理主要基于数据驱动与响应式系统、虚拟DOM、模板编译与渲染函数、组件化开发以及双向数据绑定等核心概念。这些特性使得Vue在开发动态web应用时非常高效和灵活。Vue提供了双向数据绑定的能力，使得开发者可以轻松地同步数据和视图。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端Jerry_Zheng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值