vue生命周期

Vue 实例有一个完整的生命周期,也就是从开始创建、初始化数据、编译模板、挂载 Dom、渲染 → 更新 → 渲染、销毁等一系列过程,我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程,就是生命周期。

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如需要设置数据监听、编译模板、挂载实例到 DOM、在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,给予用户机会在一些特定的场景下添加他们自己的代码。


h7ml
  • vue
  • vue
大约 7 分钟
Object.defineproperty 核心代码 自定义实现
// 触发更新视图
function updateView() {
  console.log('视图更新')
}

// 重新定义数组原型
const oldArrayProperty = Array.prototype
// 创建新对象,原型指向 oldArrayProperty ,再扩展新的方法不会影响原型
const arrProto = Object.create(oldArrayProperty)

h7ml
  • vue
  • vue
大约 1 分钟
Proxy 核心代码 自定义实现
// const data = {
//     name: 'zhangsan',
//     age: 20,
// }
const data = ['a', 'b', 'c']

const proxyData = new Proxy(data, {
  get(target, key, receiver) {
    // 只处理本身(非原型的)属性
    const ownKeys = Reflect.ownKeys(target)

h7ml
  • vue
  • vue
小于 1 分钟
vue

vue 源码分析

核心

Vue 响应式的核心是利用 Object.defineProperty()这个方法进行数据劫持和观察者模式进行数据响应式的。Object.defineProperty()这个方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。具体用法如下:

​ 它有三个参数,第一个是 object,它代表要定义属性的对象。;第二个是 prop,它代表目标对象的属性值;第三个参数是 descriptor,它代表要定义或修改的属性描述符。


h7ml
  • vue
  • vue
大约 6 分钟
proxy-observe 核心代码 自定义实现
// 创建响应式
function reactive(target = {}) {
  if (typeof target !== 'object' || target == null) {
    // 不是对象或数组,则返回
    return target
  }

  // 代理配置
  const proxyConf = {
    get(target, key, receiver) {

h7ml
  • vue
  • vue
小于 1 分钟
vue核心概念

在父组件中监听子组件的生命周期钩子

<template>
  <child @hook:mounted="onChildMounted"></child>
</template>
<script>
  export default {
    methods: {
      onChildMounted() {},
    },
  };
</script>

相关源码


h7ml
  • vue
  • vue
大约 7 分钟