Vue.js on Last Stand

Vue实例挂载

Fri, 04 Oct 2024 00:00:00 +0800

一、思考

我们都听过知其然知其所以然这句话

那么不知道大家是否思考过new Vue()这个过程中究竟做了些什么？

过程中是如何完成数据的绑定，又是如何将数据渲染到视图的等等

一、分析

首先找到vue的构造函数

源码位置：src\core\instance\index.js

function Vue (options) {
 if (process.env.NODE_ENV !== 'production' &&
 !(this instanceof Vue)
 ) {
 warn('Vue is a constructor and should be called with the `new` keyword')
 }
 this._init(options)
}

options是用户传递过来的配置项，如data、methods等常用的方法

vue构建函数调用_init方法，但我们发现本文件中并没有此方法，但仔细可以看到文件下方定定义了很多初始化方法

initMixin(Vue); // 定义 _init
stateMixin(Vue); // 定义 $set $get $delete $watch 等
eventsMixin(Vue); // 定义事件 $on $once $off $emit
lifecycleMixin(Vue);// 定义 _update $forceUpdate $destroy
renderMixin(Vue); // 定义 _render 返回虚拟dom

首先可以看initMixin方法，发现该方法在Vue原型上定义了_init方法

源码位置：src\core\instance\init.js

Vue.prototype._init = function (options?: Object) {
 const vm: Component = this
 // a uid
 vm._uid = uid++
 let startTag, endTag
 /* istanbul ignore if */
 if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
 startTag = `vue-perf-start:${vm._uid}`
 endTag = `vue-perf-end:${vm._uid}`
 mark(startTag)
 }

 // a flag to avoid this being observed
 vm._isVue = true
 // merge options
 // 合并属性，判断初始化的是否是组件，这里合并主要是 mixins 或 extends 的方法
 if (options && options._isComponent) {
 // optimize internal component instantiation
 // since dynamic options merging is pretty slow, and none of the
 // internal component options needs special treatment.
 initInternalComponent(vm, options)
 } else { // 合并vue属性
 vm.$options = mergeOptions(
 resolveConstructorOptions(vm.constructor),
 options || {},
 vm
 )
 }
 /* istanbul ignore else */
 if (process.env.NODE_ENV !== 'production') {
 // 初始化proxy拦截器
 initProxy(vm)
 } else {
 vm._renderProxy = vm
 }
 // expose real self
 vm._self = vm
 // 初始化组件生命周期标志位
 initLifecycle(vm)
 // 初始化组件事件侦听
 initEvents(vm)
 // 初始化渲染方法
 initRender(vm)
 callHook(vm, 'beforeCreate')
 // 初始化依赖注入内容，在初始化data、props之前
 initInjections(vm) // resolve injections before data/props
 // 初始化props/data/method/watch/methods
 initState(vm)
 initProvide(vm) // resolve provide after data/props
 callHook(vm, 'created')

 /* istanbul ignore if */
 if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
 vm._name = formatComponentName(vm, false)
 mark(endTag)
 measure(`vue ${vm._name} init`, startTag, endTag)
 }
 // 挂载元素
 if (vm.$options.el) {
 vm.$mount(vm.$options.el)
 }
 }

仔细阅读上面的代码，我们得到以下结论：

数据绑定

Fri, 04 Oct 2024 00:00:00 +0800

1. 定义

1.1 双向绑定 & 单向绑定

vue的双向绑定，即数据与视图的响应式设计。具体表现为：View的改变能实时让Model发生变化，而Model的变化也能实时更新View。

什么情况下用户可以更新View呢？如：填写表单。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于把Model和View做了双向绑定。

注意区别：单向数据绑定，所有数据只有一份，一旦数据变化，就去更新页面(只有data–>DOM，没有DOM–>data)。

用户在页面作出更新，需要用户手动收集(双向绑定是自动收集)，在合并到原有的数据中。

Vue.js中的v-model主要用在表单的input输入框，完成视图和数据的双向绑定：

<!DOCTYPE html>
<html>
<head></head>
<body>
 <div id="app">
 <input type="text" v-model="message">
 <p>{{message}}</p>
 </div>
 <script>
 var app = new Vue({
 el: '#app',
 data: {
 message: ''
 }
 });
 </script>
</body>
</html>

1.2 v-model来添加双向绑定

<input v-model="xxx">

<!-- 上面的代码等价于 -->
<input :value="xxx" @input="xxx = $event.target.value">
<!-- 双向绑定 = 单向绑定 + UI事件监听 -->

1.3 双向绑定、单向绑定的优缺点

单向绑定：数据流也是单向的，对于复杂应用来说是实施统一状态管理（如redux）的前提。
双向绑定：在一些需要实时反应用户输入的场合会非常方便（如多级联动菜单）。但常认为复杂应用中这种便利比不上引入状态管理带来的优势。因为不知道状态什么时候发生改变，是谁造成的改变，数据变更也不会通知。

响应式的思路：mvvm Model，View，View-Model

2. 原理概述

Vue 数据双向绑定原理是通过 数据劫持 + 发布者-订阅者模式 的方式来实现的，首先是通过 ES5 提供的 Object.defineProperty() 方法来劫持（监听）各属性的 getter、setter，并在当监听的属性发生变动时通知订阅者，是否需要更新，若更新就会执行对应的更新函数。详见 vue源码。

vue指令

Fri, 04 Oct 2024 00:00:00 +0800

1.1 钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
componentUpdated 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind 只调用一次，指令与元素解绑时调用。

Vue.directive('gqs',{
 bind() {
 // 当指令绑定到 HTML 元素上时触发.**只调用一次**
 console.log('bind triggerd')
 },
 inserted() {
 // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.**
 console.log('inserted triggerd')
 },
 updated() {
 // 所在组件的`VNode`更新时调用.
 console.log('updated triggerd')
 },
 componentUpdated() {
 // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
 console.log('componentUpdated triggerd')

 },
 unbind() {
 // 只调用一次，指令与元素解绑时调用.
 console.log('unbind triggerd')
 }
 })

1.2 钩子函数参数

指令钩子函数会被传入以下参数：

计算属性

Fri, 04 Oct 2024 00:00:00 +0800

前言

Vue 的计算属性（computed）是 Vue.js 中非常重要的一个概念。它允许你在 Vue 组件中定义一些计算逻辑，这些逻辑会依赖于 Vue 的响应式数据，并且具有缓存机制，只有在依赖数据发生改变时才会重新计算，从而提高了性能。

计算属性的主要作用包括：

数据转换
数据过滤
响应式依赖
缓存机制
简化模板

在本篇文章中，我们将详细探寻如何利用计算属性优化 Vue 组件的数据处理和渲染逻辑，深入了解 Vue 计算属性的精髓。

一. 认识计算属性

1. 什么是计算属性

Vue.js 中的计算属性（computed properties）是 Vue 实例中非常重要的一个特性。它们用于对 Vue 实例的数据进行动态计算，且具有缓存机制，只有在相关依赖发生改变时才会重新计算。这种特性使得计算属性非常适合用于处理模板中的逻辑。

2. 计算属性的定义

计算属性是在 Vue 实例的computed选项中定义的，可以是一个函数或具有get和set方法的对象。函数形式的计算属性会在调用时被执行，而对象形式的计算属性则可以提供自定义的get和set方法。

computed: {
 // 函数形式的计算属性
 reversedMessage: function () {
 return this.message.split('').reverse().join('');
 },
 // 对象形式的计算属性
 fullName: {
 get: function () {
 return this.firstName + ' ' + this.lastName;
 },
 set: function (newValue) {
 var names = newValue.split(' ');
 this.firstName = names[0];
 this.lastName = names[names.length - 1];
 }
 }
}

3. 计算属性的依赖

计算属性可以依赖于 Vue 实例的响应式数据。当依赖数据发生改变时，相关的计算属性会重新计算。

侦听器watch

Fri, 04 Oct 2024 00:00:00 +0800

一、 watch API

我们先看看 watch的使用例子,watch 有多种用法，可以接收多种类型参数:

import { reactive, watch } from 'vue'

// 1. 传入getter函数
const state = reactive({ count: 0 })
watch(() => state.count, (count, prevCount) => {
 // 当 state.count 更新，会触发此回调函数
})

// 2. 传入reactive对象
watch(state, (count, prevCount) => {
 // 当 state.count 更新，会触发此回调函数
})

// 3. 传入ref对象
const stateRef = ref(0)
watch(stateRef, (count, prevCount) => {
 // 当 stateRef.value 更新，会触发此回调函数
})

// 4.监听多个数据源，回调函数接受两个数组，分别对应来源数组中的新值和旧值：
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => { /* ... */ })

从上面的例子可以看到，对于 watch，它能接收的第一个参数类型非常多。

你可以传入一个ref对象、一个响应式对象、一个 getter 函数、甚至是一个数组。

我们在上一篇中知道了computed对象其内部是借助了 effect函数 创建了一个 reactiveEffect函数，在访问computed对象的值时，执行其 runner函数 求值。

methods

Fri, 04 Oct 2024 00:00:00 +0800

Methods 的初始化

在 Vue.js 中，每个组件实例（vm）都会有一个 methods 属性，这个属性包含了组件中定义的所有方法。这些方法需要被初始化到实例上，以便可以在模板和生命周期钩子中被调用。初始化过程如下：

function initMethods(vm, methods) {
 for (var key in methods) {
 vm[key] = methods[key] == null ? noop : bind(methods[key], vm);
 }
}

这段代码遍历 methods 对象中的每个属性，并将其复制到 Vue 实例（vm）上。如果方法不存在（methods[key] == null），则赋值为一个空函数（noop），以避免对 undefined 的调用。否则，使用 bind 方法将每个方法的 this 绑定到 Vue 实例上。

Methods 作用域的固定

在 JavaScript 中，函数的 this 值是在函数被调用时确定的，而不是在定义时。这可能导致在 Vue 实例的方法中 this 并不指向实例本身，尤其是在方法被传递给其他函数或作为回调函数时。Vue 使用 bind 来解决这个问题，确保 this 总是指向 Vue 实例。

原生和兼容性 bind 实现

Vue.js 提供了两种 bind 的实现：原生的和兼容性的。兼容性实现是为了兼容那些不支持 Function.prototype.bind 的旧浏览器。

function polyfillBind(fn, ctx) {
 function boundFn(a) {
 var l = arguments.length;
 return l ?
 (l > 1 ? fn.apply(ctx, arguments) : fn.call(ctx, a)) :
 fn.call(ctx);
 }
 boundFn._length = fn.length;
 return boundFn;
}

function nativeBind(fn, ctx) {
 return fn.bind(ctx);
}

var bind = Function.prototype.bind ?
 nativeBind :
 polyfillBind;

polyfillBind 函数创建了一个新的函数 boundFn，它在调用时使用 call 或 apply 将 fn 的 this 绑定到 ctx 上。
nativeBind 函数直接使用原生的 bind 方法。
bind 变量根据浏览器是否支持原生 bind 来选择使用哪种实现。

使用 bind 的好处

使用 bind 后，我们可以在组件的方法中直接使用 this 来访问实例的属性和方法，而不用担心 this 的指向问题。这使得代码更加简洁和安全。

生命周期

Fri, 04 Oct 2024 00:00:00 +0800

vue3生命周期

在Vue中，生命周期指的是Vue实例从创建到销毁的过程。在这个过程中，Vue实例会经历一系列的阶段，包括数据观测、模板编译、挂载DOM、更新DOM、卸载等等。在这些阶段，Vue提供了一些生命周期钩子函数，让我们可以在特定的时机执行某些代码。

为什么需要生命周期

生命周期钩子函数为我们提供了在Vue实例生命周期不同阶段执行代码的能力。这对于非响应式的操作非常有用，例如直接操作DOM、添加事件监听器或者创建定时器等。这些操作如果在数据变化时执行可能会导致不必要的性能开销，而生命周期钩子函数让我们可以更合理地安排这些操作的执行时机。一些常用的库，例如react，webpack都提供了生命周期的钩子，方便开发者理解整个运行流程。

Vue3 有哪些生命周期，分别在什么时候调用？

Vue3的生命周期钩子函数主要包括：

beforeCreate: 创建实例之前调用，此时实例的数据观测、事件等还未初始化。
created: 创建实例后调用，此时实例的数据观测、事件等已经初始化完成。
beforeMount: 挂载实例之前调用，此时模板已经编译完成，但是还未挂载到DOM。
mounted: 挂载实例后调用，此时实例已经挂载到DOM，可以进行DOM操作。
beforeUpdate: 数据更新之前调用，此时可以进行状态的最后更改。
updated: 数据更新后调用，此时DOM已经完成更新，可以进行DOM操作。
beforeUnmount: 卸载实例之前调用，此时实例仍然完全可用。
unmounted: 卸载实例后调用，此时实例已经完全卸载。

生命周期类型的枚举位于packages/runtime-core/src/enums.ts目录下：

export const enum LifecycleHooks {
  BEFORE_CREATE = 'bc', // 创建之前
  CREATED = 'c', // 创建
  BEFORE_MOUNT = 'bm', // 挂载之前
  MOUNTED = 'm', // 挂载
  BEFORE_UPDATE = 'bu', // 更新之前
  UPDATED = 'u', // 更新
  BEFORE_UNMOUNT = 'bum', // 卸载之前
  UNMOUNTED = 'um', // 卸载之后
  DEACTIVATED = 'da', // 被 keep-alive 缓存的组件停用时调用。
  ACTIVATED = 'a', // 被 keep-alive 缓存的组件激活时调用。
  RENDER_TRIGGERED = 'rtg', // 依赖被收集时调用
  RENDER_TRACKED = 'rtc', // 依赖被触发时调用
  ERROR_CAPTURED = 'ec', // 错误捕获
  SERVER_PREFETCH = 'sp'
}

上面生命周期可以用一张图来表示：

选项式和组合式生命周期的区别

在Vue3中，我们可以使用选项式API和组合式API来定义组件。这两种API对应的生命周期钩子函数有一些区别。

选项式API的生命周期钩子函数定义在组件选项对象的methods中，例如：

export default {
  methods: {
    created() {
      // do something
   }
 }
}

组合式API的生命周期钩子函数定义在setup函数中，需要使用import从vue中引入，例如：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      // do something
   });
 }
}

需要注意的是，在组合式API中没有beforecate和created钩子，因为他们本身被setup这个函数替代了，直接把相关逻辑写在setup中就行了

组件通信

Fri, 04 Oct 2024 00:00:00 +0800

Vue3 组件通信方式

props
$emit
expose / ref
$attrs
v-model
provide / inject
Vuex
mitt

Vue3 通信使用写法

1. props

用 props 传数据给子组件有两种方法，如下

方法一，setup() 方法写法

// Parent.vue 传送
<child :msg1="msg1" :msg2="msg2"></child>
<script>
import child from "./child.vue"
import { ref, reactive } from "vue"
export default {
 data(){
 return {
 msg1:"这是传级子组件的信息1"
 }
 },
 setup(){
 // 创建一个响应式数据

 // 写法一 适用于基础类型 ref 还有其他用处，下面章节有介绍
 const msg2 = ref("这是传级子组件的信息2")

 // 写法二 适用于复杂类型，如数组、对象
 const msg2 = reactive(["这是传级子组件的信息2"])

 return {
 msg2
 }
 }
}
</script>

// Child.vue 接收
<script>
export default {
 props: ["msg1", "msg2"],// 如果这行不写，下面就接收不到
 setup(props) {
 console.log(props) // { msg1:"这是传给子组件的信息1", msg2:"这是传给子组件的信息2" }
 },
}
</script>

方法二，setup 语法糖

插槽

Fri, 04 Oct 2024 00:00:00 +0800

一、插槽的几种使用方式

1. 普通插槽

举例来说，这里有一个 <FancyButton> 组件，可以像这样使用：

<FancyButton>
 Click me! <!-- 插槽内容 -->
</FancyButton>

而 <FancyButton> 的模板是这样的：

<button class="fancy-btn">
 <slot></slot> <!-- 插槽出口 -->
</button>

<slot> 元素是一个 插槽出口 (slot outlet)，标示了父元素提供的 插槽内容 (slot content) 将在哪里被渲染。

最终渲染出的 DOM 是这样：

<button class="fancy-btn">Click me!</button>

2. 具名插槽

有时在一个组件中包含多个插槽出口是很有用的。举例来说，在一个 <BaseLayout> 组件中，有如下模板：

<div class="container">
 <header>
 <!-- 标题内容放这里 -->
 </header>
 <main>
 <!-- 主要内容放这里 -->
 </main>
 <footer>
 <!-- 底部内容放这里 -->
 </footer>
</div>

对于这种场景， <slot> 元素可以有一个特殊的 attribute name，用来给各个插槽分配唯一的 ID，以确定每一处要渲染的内容：

v-if/v-show

Fri, 04 Oct 2024 00:00:00 +0800

v-show原理

export const vShow: ObjectDirective<VShowElement> = {
 beforeMount(el, { value }, { transition }) {
 el._vod = el.style.display === 'none' ? '' : el.style.display
 if (transition && value) {
 transition.beforeEnter(el)
 } else {
 setDisplay(el, value)
 }
 },
 mounted(el, { value }, { transition }) {
 if (transition && value) {
 transition.enter(el)
 }
 },
 updated(el, { value, oldValue }, { transition }) {
 // ...
 },
 beforeUnmount(el, { value }) {
 setDisplay(el, value)
 }
}

有transition就执行transition，没有transition就直接设置display。不管初始条件是什么，元素总是会被渲染。

v-if原理

export const transformIf = createStructuralDirectiveTransform(
 /^(if|else|else-if)$/,
 (node, dir, context) => {
 return processIf(node, dir, context, (ifNode, branch, isRoot) => {
 // ...
 return () => {
 if (isRoot) {
 ifNode.codegenNode = createCodegenNodeForBranch(
 branch,
 key,
 context
 ) as IfConditionalExpression
 } else {
 // attach this branch's codegen node to the v-if root.
 const parentCondition = getParentCondition(ifNode.codegenNode!)
 parentCondition.alternate = createCodegenNodeForBranch(
 branch,
 key + ifNode.branches.length - 1,
 context
 )
 }
 }
 })
 }
)

返回一个node节点，render函数通过表达式的值来决定是否生成DOM

v-for

Sat, 05 Oct 2024 00:00:00 +0800

在 Vue.js 开发中，v-for 是我们用来遍历数组、对象或其他数据结构的核心指令。然而，很多开发者可能忽略了其中的一个细微差别：in 和 of。这两个关键字看似相似，但却有各自不同的使用场景和适用数据类型。理解它们的区别，可以帮助我们编写更简洁、高效的代码。

本文将详细探讨 v-for 中的 in 和 of，并讲解它们各自的适用场景，帮助你在 Vue.js 项目中做出最佳选择。

什么是 `v-for`？

v-for 是 Vue.js 提供的用于遍历数据的指令，它可以帮助你快速渲染列表、表格等动态生成的内容。在使用 v-for 时，我们通常需要遍历一个数据集合，并将每一项绑定到 DOM 元素上。

`in` 和 `of` 的概念

v-for 中的 in 和 of 是遍历数据时的两个常用关键字，它们的主要区别在于：in 更通用，可以遍历数组、对象和整数范围；而 of 专注于遍历可迭代对象（如数组、字符串、Set、Map 等） 。

接下来，我们深入探讨它们的具体用法及差异。

1. `in`：适用于数组、对象、整数范围

1.1 遍历数组

in 是 Vue.js 中默认推荐的方式，用于遍历数组中的元素。你可以轻松地用 in 处理数组中的每个值。

<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>

假设 items = ['apple', 'banana', 'cherry']，输出结果为：

<li>apple</li>
<li>banana</li>
<li>cherry</li>

1.2 遍历对象

当你需要遍历对象的键和值时，in 也非常方便。通过 (value, key) 语法，你可以轻松获取对象的键和值。

vue事件处理

Sat, 05 Oct 2024 00:00:00 +0800

一、DOM 事件流

想必看过《红宝书》的前端 er 对标题都不会特别陌生，我们来看看定义：当一个 HTML 元素产生一个事件时，该事件会在树形结构的 DOM 上面沿着元素节点路径进行传播，事件所经过的路径结点都会收到该事件，这个传播过程可称为 DOM 事件流。

二、DOM 事件流模型

DOM 事件流分为 捕获型事件流 和 冒泡型事件流。两种事件流分别对应三阶段 DOM 事件流模型中的捕获阶段和冒泡阶段：

捕获阶段：事件从最外面的祖先节点依次传递到最里面的后代节点
目标阶段：真正的目标节点正在处理事件的阶段
冒泡阶段：事件又从最里面的后代节点逐层传出到最外面的祖先节点

三、Vue 之事件处理

Vue 中提供了事件绑定的语法糖，我们可以很简单地在标签中直接使用 @click="handleClick($event)" 就可以绑定点击事件。

而且在 Vue 里面，Vue 的事件触发默认为冒泡过程监听，意思就是上面 @click="handleClick($event)" 中点击事件的执行是冒泡过程触发的。

四、Vue 之事件修饰符

4.1 `.capture`

捕获监听器

<div @click="log(1)" @click.capture="log(1)" style="background-color: #00f">
 <div @click="log(2)" @click.capture="log(2)" style="background-color: #66f">
 <div @click="log(3)" @click.capture="log(3)" style="background-color: #ccf">
 <div @click="log(4)" @click.capture="log(4)" style="background-color: #fff">
 点击这里
 </div>
 </div>
 </div>
</div>

控制台打印结果为：1 2 3 4 4 3 2 1

自定义指令

Sat, 05 Oct 2024 00:00:00 +0800

如何自定义指令？

其实关于这个问题官方文档上已经有了很好的示例的，我们先来温故一下。

除了核心功能默认内置的指令 (v-model 和 v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：

当页面加载时，该元素将获得焦点 (注意： autofocus 在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
 inserted: function (el) {
 // 聚焦元素
 el.focus()
 }
})

如果想注册局部指令，组件中也接受一个 directives 的选项：

directives: {
 focus: {
 // 指令的定义
 inserted: function (el) {
 el.focus()
 }
 }
}

然后你可以在模板中任何元素上使用新的 v-focus property，如下：

<input v-focus>

指令内部提供的钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选)：

bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update: 所在组件的 VNode 更新时调用，**但是可能发生在其子 VNode 更新之前。**指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated: 指令所在组件的 VNode 及其子VNode全部更新后调用。
unbind: 只调用一次，指令与元素解绑时调用。

钩子函数参数

指令钩子函数会被传入以下参数：

mixin-混入

Sat, 05 Oct 2024 00:00:00 +0800

1. 什么是Mixin？

想要使用一个事物或者工具，我们首要先了解它是什么，这样我们才好对症下药。

其实Mixin不是Vue专属的，可以说它是一种思想，也可以说它就是混入的意思，在很多开发框架中都实现了Mixin(混入)，我们这里主要讲解的是Vue中的Mixin。

老规矩，先看官方文档。

官方解释：

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

官方的解释通常都是晦涩难懂的，因为要专业和准确嘛！

我们可以用我们自己容易理解的话来说说Vue中的Mixin是什么。

民间解释：

将组件的公共逻辑或者配置提取出来，哪个组件需要用到时，直接将提取的这部分混入到组件内部即可。这样既可以减少代码冗余度，也可以让后期维护起来更加容易。

这里需要注意的是：提取的是逻辑或配置，而不是HTML代码和CSS代码。其实大家也可以换一种想法，mixin就是组件中的组件，Vue组件化让我们的代码复用性更高，那么组件与组件之间还有重复部分，我们使用Mixin在抽离一遍。

2. Mixin和Vuex的区别？

上面一点说Mixin就是一个抽离公共部分的作用。在Vue中，Vuex状态管理似乎也是做的这一件事，它也是将组件之间可能共享的数据抽离出来。两者看似一样，实则还是有细微的区别，区别如下：

Vuex公共状态管理，如果在一个组件中更改了Vuex中的某个数据，那么其它所有引用了Vuex中该数据的组件也会跟着变化。
Mixin中的数据和方法都是独立的，组件之间使用后是互相不影响的。

3. 如何使用？

我们了解了Mixin的概念，那么如何使用它呢？这才是我们的重点。

3.1 准备工作

接下来我们的mixin就放在Vue2.x的脚手架项目中演示。

利用Vue-cli初始化一个最简单的项目：

3.1 mixin定义

定义mixin也非常简单，它就是一个对象而已，只不过这个对象里面可以包含Vue组件中的一些常见配置，如data、methods、created等等。

在我们的项目src目录下新建mixin文件夹，然后新建index.js文件，该文件存放我们的mixin代码。

代码如下：

// src/mixin/index.js
export const mixins = {
 data() {
 return {};
 },
 computed: {},
 created() {},
 mounted() {},
 methods: {},
};

可以看到我们的mixin非常的简单，主要包含了一个Vue组件的常见的逻辑结构。

接下来让我们在mixin中简单的写点东西，代码如下：

export const mixins = {
 data() {
 return {
 msg: "我是小猪课堂",
 };
 },
 computed: {},
 created() {
 console.log("我是mixin中的created生命周期函数");
 },
 mounted() {
 console.log("我是mixin中的mounted生命周期函数");
 },
 methods: {
 clickMe() {
 console.log("我是mixin中的点击事件");
 },
 },
};

3.2 局部混入

我们的公共mixin定义好后，最重要就是如何使用它。根据不同的业务场景，我们可以分为两种：局部混入和全局混入。顾名思义，局部混入和组件的按需加载有点类似，就是需要用到mixin中的代码时，我们再在组件章引入它。全局混入的话，则代表我在项目的任何组件中都可以使用mixin。

工具函数

Sat, 05 Oct 2024 00:00:00 +0800

一、Vue.util：Vue.js的工具函数集合

Vue.util是Vue.js内部的一个工具函数集合，包含了多种实用的方法，用于处理各种常见的任务。然而，需要注意的是，Vue.util并不是Vue.js公开API的一部分，这意味着它的使用可能会随着Vue.js版本的更新而发生变化。因此，在开发过程中，应尽量避免直接使用Vue.util中的方法，而是使用Vue.js提供的公开API或其他更稳定的解决方案。

尽管如此，了解Vue.util中的一些方法仍然有助于我们更好地理解Vue.js的内部机制。例如，Vue.util.extend方法用于将一个或多个对象的属性混合到目标对象中，这在需要将多个对象合并到一个新对象中时非常有用。然而，随着Vue.js的发展，许多原本在Vue.util中的方法已经被移动到其他更合适的API中，或者被更现代的方法所替代。

二、Vue.set：动态添加响应式属性

Vue.set是Vue.js提供的一个全局方法，用于向响应式对象添加一个新的属性，并确保该属性是响应式的。在默认情况下，Vue.js只能检测到已经存在的对象的属性并将其转换为响应式属性，但对于后期动态添加的属性，Vue.js无法自动进行响应式转换。这时，就可以使用Vue.set方法手动将属性转换为响应式。

Vue.set方法接受三个参数：对象、属性名和属性值。例如：

Vue.set(vm.someObject, 'newProperty', 'Hello, Vue!');

上面的代码将someObject对象的newProperty属性设置为'Hello, Vue!'，并将其转换为响应式属性。这样，当属性值发生修改时，Vue可以检测到并响应式地更新视图。

Vue.set方法的主要优势在于它能够将属性添加为响应式属性，使得Vue.js能够跟踪和响应属性值的变化，从而及时更新视图。此外，Vue.set方法还可以用于在数组中添加新元素，使其成为响应式。

三、Vue.delete：删除响应式对象的属性

Vue.delete是Vue.js提供的另一个全局方法，用于从响应式对象中删除指定的属性。与Vue.set方法类似，Vue.delete也可以触发响应式更新，使Vue能够正确追踪到属性的删除操作。

Vue.delete方法接受两个参数：要删除的属性所在的对象和要删除的属性名。例如：

Vue.delete(this.someObject, 'someProperty');

上面的代码将从someObject对象中删除someProperty属性，并相应地更新视图。

需要注意的是，Vue.delete方法只能用于响应式对象，而不能用于普通的JavaScript对象。此外，在删除数组中的元素时，Vue.js提供了一些数组特定的方法（如splice、push、pop等）来确保数组的响应式更新。因此，在删除数组元素时，应优先使用这些方法而不是Vue.delete。

四、实际应用中的注意事项

在使用Vue.set和Vue.delete等工具函数时，需要注意以下几点：

避免直接操作对象或数组：在Vue.js中，直接修改对象或数组的属性或元素可能不会触发视图更新。因此，应优先使用Vue.set和Vue提供的数组方法来修改响应式数据。
注意命名冲突：在添加新属性时，应确保属性名不与现有属性名冲突，以避免覆盖现有属性。
了解Vue.js的响应式机制：为了更好地使用Vue.set和Vue.delete等工具函数，需要了解Vue.js的响应式机制以及它是如何跟踪和响应数据变化的。

常见考点

1. Vue 内置工具函数

问题：

Vue 提供了哪些内置工具函数？
这些工具函数的使用场景是什么？

考察点：

Vue.set 和 Vue.delete： Vue 中的 Vue.set 和 Vue.delete 是为了响应式系统而提供的工具函数，它们用于确保在数组或对象中添加、删除元素时，能够保持数据的响应性。
Vue.set：用于向对象中添加新的属性，并确保该属性是响应式的。

Vue.set(obj, 'newProp', value);

Vue.delete：用于删除对象或数组中的元素，并保持响应性。

Vue.delete(obj, 'propertyName');
Vue.delete(arr, index);

Vue.nextTick： Vue.nextTick 是一个异步队列，用于在 DOM 更新后执行回调函数。它保证了在 Vue 完成 DOM 更新后，回调才会被执行。

Vue.nextTick(() => {
 console.log('DOM has been updated!');
});

Vue.util： Vue 提供了一些工具函数，如 Vue.util.extend 用于对象的深拷贝，Vue.util.merge 用于合并对象。

2. 自定义工具函数的常见应用

问题：

你在 Vue 项目中常用哪些自定义工具函数？请列举一些例子。
如何编写一个简单的工具函数来简化 Vue 中的日期格式化？

考察点：

日期格式化工具函数：在 Vue 项目中，常常需要对日期进行格式化。你可以创建一个工具函数来统一处理日期格式。在组件中使用该工具函数：

// utils/date.js
export function formatDate(date, format = 'YYYY-MM-DD') {
 const d = new Date(date);
 const map = {
 'YYYY': d.getFullYear(),
 'MM': String(d.getMonth() + 1).padStart(2, '0'),
 'DD': String(d.getDate()).padStart(2, '0'),
 'HH': String(d.getHours()).padStart(2, '0'),
 'mm': String(d.getMinutes()).padStart(2, '0'),
 'ss': String(d.getSeconds()).padStart(2, '0'),
 };
 return format.replace(/YYYY|MM|DD|HH|mm|ss/g, matched => map[matched]);
}

import { formatDate } from './utils/date';

export default {
 data() {
 return {
 date: '2024-12-15T12:00:00',
 };
 },
 computed: {
 formattedDate() {
 return formatDate(this.date, 'YYYY-MM-DD HH:mm:ss');
 }
 }
};

深拷贝工具函数：在某些场景下，你可能需要深拷贝对象，避免对原始对象进行修改。

export function deepClone(obj) {
 return JSON.parse(JSON.stringify(obj));
}

3. Vue 的过滤器（Filters）

问题：

Vue 中的过滤器有什么作用？举个例子说明。
过滤器和工具函数有何区别，何时使用过滤器，何时使用工具函数？

考察点：

Vue 过滤器：过滤器是用于格式化输出数据的一种工具，在 Vue 模板中可以直接使用，但仅适用于模板中的数据绑定。常用的场景是格式化日期、数字等。

Vue.filter('currency', function (value) {
 return '$' + value.toFixed(2);
});

// 在模板中使用
{{ price | currency }}

工具函数与过滤器的区别：
过滤器：通常用于模板中，只能格式化输出。
工具函数：可以在组件的任何地方使用，提供更强的逻辑处理能力，适合更复杂的功能（如数据计算、事件管理等）。

4. Vuex 与工具函数

问题：

如何通过工具函数简化 Vuex 的一些操作？
你会如何编写一个工具函数来帮助管理 Vuex 中的 getter、mutation 或 action？

考察点：

在 Vuex 中，常常需要对数据进行集中管理。可以通过工具函数来简化 Vuex 操作，避免重复代码。

$nextTick

Sat, 05 Oct 2024 00:00:00 +0800

nextTick 是 Vue 的一个核心实现，$nextTick方法将回调延迟到下次DOM更新循环之后执行。Vue 的 nextTick 其本质是对 JavaScript 执行原理 EventLoop 的一种应用。

nextTick 的核心是利用了如 Promise 、MutationObserver、setImmediate、setTimeout的原生 JavaScript 方法来模拟对应的微/宏任务的实现，本质是为了利用 JavaScript 的这些异步回调任务队列来实现 Vue 框架中自己的异步回调队列

前置知识 - js事件循环

JS 运行机制

JS 执行是单线程的，基于事件循环。事件循环大致分为以下步骤：

所有同步任务都在主线程上执行，形成一个执行栈。
异步任务放进任务队列，异步任务分为宏任务和微任务
执行栈所有同步任务执行完成，就会执行任务队列。对应的异步任务，结束等待状态，进入执行栈，开始执行。
主线程不断重复上面的第三步。

主线程的执行过程就是一个 tick，而所有的异步结果都是通过 “任务队列” 来调度。消息队列中存放的是一个个的任务（task）。 task 分为两大类，分别是 macro task 和 micro task，并且每个 macro task(宏任务) 结束后，都要清空所有的 micro task(微任务)。

如图所示

for (macroTask of macroTaskQueue) {
 // 执行宏任务
 handleMacroTask();

 // 执行所有微任务
 for (microTask of microTaskQueue) {
 handleMicroTask(microTask);
 }
}

宏任务： script、setTimeout、setInterval、Node中的setImmediate 等
微任务： Promise.then、MutationObserver、Node 中的 Process.nextTick等

异步组件

Sat, 05 Oct 2024 00:00:00 +0800

当我们的项目达到一定的规模时，对于某些组件来说，我们并不希望一开始全部加载，而是需要的时候进行加载；这样的做得目的可以很好的提高用户体验。

为了实现这个功能，Vue3中为我们提供了一个方法，即defineAsyncComponent，这个方法可以传递两种类型的参数，分别是函数类型和对象类型，接下来我们分别学习。

传递工厂函数作为参数

defineAsyncComponent方法接收一个工厂函数是它的基本用法，这个工厂函数必须返回一个Promise，Promise的resolve应该返回一个组件。

我们这里以Vue Cli创建的项目为例，这里我稍微做了一下修改，将头部的图片拆分为一个组件，代码如下：

<template>
 <logo-img />
 <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import LogoImg from './components/LogoImg.vue'
import HelloWorld from './components/HelloWorld.vue'
</script>

现在我们就将<hello-world>组件修改为异步组件，示例代码如下：

<template>
 <logo-img />
 <hello-world msg="Welcome to Your Vue.js App" />
</template>

<script setup>
import { defineAsyncComponent } from 'vue'
import LogoImg from './components/LogoImg.vue'

// 简单用法
const HelloWorld = defineAsyncComponent(() =>
 import('./components/HelloWorld.vue'),
)
</script>

我们这里为了看到效果，将import延迟执行，示例代码如下：

<script setup>
import { defineAsyncComponent } from 'vue'
import LogoImg from './components/LogoImg.vue'

// 定义一个耗时执行的函数，t 表示延迟的时间， callback 表示需要执行的函数，可选
const time = (t, callback = () => {}) => {
 return new Promise(resolve => {
 setTimeout(() => {
 callback()
 resolve()
 }, t)
 })
}
// 定义异步组件，这里这样写是为了查看效果
const HelloWorld = defineAsyncComponent(() => {
 return new Promise((resolve, reject) => {
 ;(async function () {
 try {
 await time(2000)
 const res = await import('./components/HelloWorld.vue')
 resolve(res)
 } catch (error) {
 reject(error)
 }
 })()
 })
})
</script>

代码运行结果如下所示：

vue路由

Sat, 05 Oct 2024 00:00:00 +0800

从后端路由开始

路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样

http://www.xxx.com/login

大致流程可以看成这样：

浏览器发出请求
服务器监听到80端口（或443）有请求过来，并解析url路径
根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等）
浏览器根据数据包的 Content-Type 来决定如何解析数据

简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。

前端路由

1. hash 模式

随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的情况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不仅仅是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，所以就有了前端路由。类似于服务端路由，前端路由实现起来其实也很简单，就是匹配不同的 url 路径，进行解析，然后动态的渲染出区域 html 内容。但是这样存在一个问题，就是 url 每次变化的时候，都会造成页面的刷新。那解决问题的思路便是在改变 url 的情况下，保证页面的不刷新。在 2014 年之前，大家是通过 hash 来实现路由，url hash 就是类似于：

http://www.xxx.com/#/login

这种 #。后面 hash 值的变化，并不会导致浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，通过这个事件我们就可以知道 hash 值发生了哪些变化。然后我们便可以监听hashchange来实现更新页面部分内容的操作：

function matchAndUpdate () {
 // todo 匹配 hash 做 dom 更新操作
}

window.addEventListener('hashchange', matchAndUpdate)

2. history 模式

14年后，因为HTML5标准发布。多了两个 API，pushState 和 replaceState，通过这两个 API 可以改变 url 地址且不会发送请求。同时还有popstate 事件。通过这些就能用另一种方式来实现前端路由了，但原理都是跟 hash 实现相同的。用了 HTML5 的实现，单页路由的 url 就不会多出一个#，变得更加美观。但因为没有 # 号，所以当用户刷新页面之类的操作时，浏览器还是会给服务器发送请求。为了避免出现这种情况，所以这个实现需要服务器的支持，需要把所有路由都重定向到根页面。

状态管理

Sat, 05 Oct 2024 00:00:00 +0800

本知识点将以 Pinia 为例，介绍 Vue 中的状态管理。

前言

Pinia简称小菠萝🍍，是一个专为Vue 3设计的现代化状态管理库，为Vue 3开发的，它提供了一种简单、可扩展和类型安全的方式来管理应用程序的状态。

与Vue 2中的Vuex相比，Pinia提供了更好的TypeScript支持，具有更好的类型定义和类型推断，可在编译时捕获错误，提供更高的代码可靠性和开发体验。它是专为Vue 3设计的，充分利用了Vue 3的新特性，如Composition API，以提供更直接、自然和灵活的状态管理体验。Pinia的核心概念是Store，它类似于Vuex中的模块，用于管理应用程序的状，可以将相关的状态和逻辑组合到单个Store中，使代码更清晰、结构更有组织性。除此之外海提供了许多有用的特性和功能，例如模块化组织、状态持久化、插件扩展等。

总的来说，Pinia是一个功能强大而灵活的状态管理解决方案，适用于各种规模的Vue 3应用程序。它提供了现代化的特性和工具，帮助我们更好地组织、管理和扩展应用程序的状态，同时提供了更好的类型安全和开发体验。

安装

运行安装命令

npm install pinia

在main.ts中引入

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

初始化Store

新建stores文件，用于存放所有的store，然后创建index.ts。

同过 defineStore() 定义一个store，它接受一个参数作为仓库名称，也就是Id。它返回一个函数，默认我们使用user开头的风格来接收。第二个参数为一个Setup函数或者Option对象。

import { defineStore } from 'pinia'

export const useUsersStore = defineStore('users', {
 // 其他配置...

})

Option Store

这种方式熟悉Vuex的很了解，传入一个带有 state、actions 与 getters 属性的 Option 对象

export const userUsersStore = defineStore('users', {
 state: () => {
 return {
 name: 'inkun',
 current: 100
 }
 },

 getters: {
 getName: (state) => state.name + '🐔你好帅'
 },

 actions:{
 getUserInfo {
 ...
 }
 }
})

在 Option Store 中：

服务器渲染

Sat, 05 Oct 2024 00:00:00 +0800

前言

什么是SSR(Server-Side Rendering)？类似于用Java、ASP.NET、php开发前端页面，服务端准备数据并执行页面渲染，然后把完整的HTML发送给客户端。现代化的SSR通常和Vue、React等前端框架强关联，通过Node.js在服务端提前将page、component使用同构方式渲染为html代码，其目的是在实现SSR时尽量复用一套渲染机制。例如Vue框架就同时支持了CSR(Client-Side Rendering)和SSR。

SSR能解决什么问题？

SEO: Google、百度、Yandex、Bing或者Yahoo等搜索引擎会通过网络爬取你的页面并建立索引，如果的信息越完整，那么你的网站就更容易被检索到。使用SSR技术，让页面在服务端提前渲染好再返回给客户端，这样各类搜索引擎就能拿到比较完整的页面信息，提升检索质量。
首屏渲染：SPA(Single Page Application)将页面渲染放到客户端执行，并且在渲染之前要加载大量的Javascript代码，所以首屏渲染需要花费较长时间。而SSR直接在服务端渲染完再返回客户端，使用户能够快速看到页面内容。

有哪些框架支持SSR？

开源库	支持语言	star数	描述
Nuxt	Vue	54.9k	快速构架、类型安全、高性能、易扩展
Next	React	127k	老牌框架、社区完善、Data Fetch、Styling
quasar	Vue	26k	丰富的UI、支持桌面端和移动端
Remix	React	29.9k	极致的用户体验、开箱即用

本知识点将以 Nuxt 为例，介绍如何实现 SSR。

什么是Nuxt

基于Vue、React、Angular实现的full-stack框架数不胜数，但就Vue框架领域内，应该数Nuxt最为Top 1。Nuxt保持了Vue生态的“开箱即用”特性，类似于Vite，几条指令就可直接run起来。如果你熟悉Vue，那么基于Nuxt写应用，体验上和写Vue客户端应用极其相似。

Nuxt提前预制了一套目录结构，并自动处理路由、导入、数据获取，开发人员仅需按约定的规则实现页面、组件、数据API即可，极大降低开发人员学习成本。Nuxt的特性可总结为：

基于文件的路由: 页面统一添加到pages/目录下，例如添加index.vue、about.vue、contact.vue，就可以通过/访问首页，通过/about返回关于页面；
代码分割：得益于Vue的Virtual Node，Nuxt根据目录规则提前生成完整的依赖树，这样能够将所有code拆分为最小单元的chunks, 从而减少应用初始化加载时间；
开箱即用的SSR：Nuxt内部使用Vue的SSR，除了Vue实现SSR、CSR本身的差异，可以像开发CSR的Vue应用一样来开发SSR，降低研发心智负担；
自动导入：在实现页面或组件时，不需要像CSR手动导入(import Card from './Card.Vue')依赖，当Nuxt识别到有使用外部组件，bundle过程会自动识别；
数据获取工具：提供一套组合式FetchAPI，实现client、server端的同构；
配置好的构建工具：默认使用Vite构建，同时支持Webpack、Rspack；

Nuxt的架构设计和vue/core很相似，将整体功能拆分为独立的package:

核心引擎：nuxt；
bundlers: 打包器包含@nuxt/vite-builde、nuxt/webpack-builder、@nuxt/rspack-builder；
命令行工具：nuxi；
服务端引擎：nitro；
开发套件：@nuxt/kit；

上手体验

初始化项目

使用nuxi提供的指令初始化项目：

npx nuxi@latest init nuxt-learn-examples

如果安装过程下载失败，可能需要配置hosts:

185.199.108.133 raw.githubusercontent.com

最新nuxt版本3.14初始化的项目目录比较简单，少了pages、plugins等目录，入口为app.vue：

Vue3 API

Sat, 05 Oct 2024 00:00:00 +0800

📍前言

最近在一次理解vue项目的代码时，发现周一对好多API都不太熟悉。这间接导致的问题是，代码理解速度要比平常要慢很多。于是乎，赶忙把vue API的学习提上了日程。

在下面的文章中，将地板式地扫盲vue3文档中API模块的所有内容，融入周一的理解进行深入介绍。下面就来一起看看吧~🍬

一、🖇框架搭建

1、关于文档

首先附上官方文档的具体材料：cn.vuejs.org/api/

2、VUE3 API整体盘点

在vue3的全新API中，有部分在vue2的基础上沿用了。还有另外一部分，是vue3所新增加的。我们先来看vue3 API文档主要包含哪些内容？

vue3 API主要包含以下六个部分：

全局API —— 全局会用到的API
组合式API —— vue3所拥有的组合式API
选项式API —— vue2所拥有的选项式API
内置内容 —— 指令、组件、特殊元素和特殊属性
单文件组件 —— 语法定义、
进阶API —— 渲染函数、服务端渲染、TS工具类型和自定义渲染

下面将依据上面提到的六大点内容，来进行相应的剖析和讲解。

二、🎨全局API

vue3的全局API包含两个部分：应用实例和通用API。那它们各自都有哪些内容呢？

1、应用实例

2、通用API

三、🚲组合式API

谈到vue3 ，相信大家最为熟悉的就是 composition API 了，也就是 组合式 API 。那么，vue3 的 组合式 API 都给我们带来了什么呢？

1、setup

2、响应式：核心

3、响应式：工具函数

4、响应式：进阶

5、生命周期钩子

6、依赖注入

四、🌠选项式API

选项式API 即 options API 。可能有的小伙伴会觉得它在 vue2 项目下会更为常见一些。但在 vue3 项目中，也是有一些 选项式API 值得我们去挖掘的。那都有哪些内容呢，我们来一探究竟。

响应式原理

Sat, 05 Oct 2024 00:00:00 +0800

什么是响应式系统

在 Vue 中，数据驱动视图是一个非常重要的概念。当数据发生变化时，视图会自动更新，这是因为 Vue 实现了一个响应式系统，通过追踪依赖关系来自动更新视图。

简单来说，响应式系统就是 Vue 能够监听数据变化，并在变化时自动更新 DOM 的核心机制。在 Vue3 中，响应式系统的改进使得响应式数据可以更加高效地更新视图，同时也提升了开发体验和性能。

Vue2 的响应式原理

在 Vue2 中，响应式原理是通过 Object.defineProperty 来实现的。Vue 会在数据对象上定义 getter 和 setter，来实现数据变化时更新视图的功能。

举个例子，当一个数据对象被定义为响应式时，我们可以通过访问这个对象的属性来触发 get 操作。具体实现如下：

Object.defineProperty(obj, 'foo', {
 get: function() {
 console.log('get foo')
 return obj._foo
 },
 set: function(newVal) {
 console.log('set foo')
 obj._foo = newVal
 }
})

在上面的代码中，我们通过 Object.defineProperty 方法来监听对象上的属性 foo，当访问 foo 属性时，会触发 get 操作，并输出日志。同理，当给 foo 属性赋值时，会触发 set 操作，并输出日志。

在 Vue2 中，我们可以通过使用上面的方法来将数据对象中的所有属性转化成响应式的，以实现数据变化时更新视图的功能。

Vue3 的响应式原理

在 Vue3 中，响应式原理的实现方式和 Vue2 相比，有了相当大的变化。Vue3 直接使用了 ES6 Proxy 对象来拦截对对象的访问操作。Proxy 可以监听到对对象进行的访问、赋值等操作，并在这些操作发生时通知相关依赖以维护响应式系统的更新。

watch与watchEffect

Sat, 05 Oct 2024 00:00:00 +0800

Watch

基本用法

当我们需要在数据变化时执行一些“副作用”：如更改 DOM、执行异步操作，我们可以使用 watch 函数：

<script setup>
import { ref, watch } from 'vue'

const question = ref('')
const answer = ref('This is answer. ;-)')

// 侦听一个 ref
watch(question, async (newQuestion, oldQuestion) => {
 answer.value = 'Thinking...'
 const res = await fetch('https://...')
 answer.value = (await res.json()).answer
})
</script>

<template>
 <input v-model="question" />
 <p>{{ answer }}</p>
</template>

watch() 一共可以接受三个参数，侦听数据源、回调函数和配置选项。

侦听数据源

watch 的第一个参数可以是不同形式的“数据源”，它可以是：

一个 ref
一个计算属性
一个 getter 函数（有返回值的函数）
一个响应式对象
以上类型的值组成的数组

const x = ref(1)
const y = ref(1)
const doubleX = computed(() => x.value * 2)
const obj = reactive({ count: 0 })

// 单个 ref
watch(x, (newValue) => {
 console.log(`x is ${newValue}`)
})

// 计算属性
watch(doubleX, (newValue) => {
 console.log(`doubleX is ${newValue}`)
})

// getter 函数
watch(
 () => x.value + y.value,
 (sum) => {
 console.log(`sum of x + y is: ${sum}`)
 }
)

// 响应式对象
watch(obj, (newValue, oldValue) => {
 // 在嵌套的属性变更时触发
 // 注意：`newValue` 此处和 `oldValue` 是相等的
 // 因为它们是同一个对象！
})

// 以上类型的值组成的数组
watch([x, () => y.value], ([newX, newY]) => {
 console.log(`x is ${newX} and y is ${newY}`)
})

注意，你不能直接侦听响应式对象的属性值，例如:

Vue.js on Last Stand

Vue实例挂载

一、思考

一、分析

数据绑定

1. 定义

1.1 双向绑定 & 单向绑定

1.2 v-model来添加双向绑定

1.3 双向绑定、单向绑定的优缺点

2. 原理概述

vue指令

1.1 钩子函数

1.2 钩子函数参数

计算属性

前言

一. 认识计算属性

1. 什么是计算属性

2. 计算属性的定义

3. 计算属性的依赖

侦听器watch

一、 watch API

methods

Methods 的初始化

Methods 作用域的固定

原生和兼容性 bind 实现

使用 bind 的好处

生命周期

vue3生命周期

为什么需要生命周期

Vue3 有哪些生命周期，分别在什么时候调用？

选项式和组合式生命周期的区别

组件通信

Vue3 组件通信方式

Vue3 通信使用写法

1. props

插槽

一、插槽的几种使用方式

1. 普通插槽

2. 具名插槽

v-if/v-show

v-show原理

v-if原理

v-for

什么是 v-for？

in 和 of 的概念

1. in：适用于数组、对象、整数范围

1.1 遍历数组

1.2 遍历对象

vue事件处理

一、DOM 事件流

二、DOM 事件流模型

三、Vue 之事件处理

四、Vue 之事件修饰符

4.1 .capture

自定义指令

如何自定义指令？

指令内部提供的钩子函数

钩子函数参数

mixin-混入

1. 什么是Mixin？

2. Mixin和Vuex的区别？

3. 如何使用？

3.1 准备工作

3.1 mixin定义

3.2 局部混入

工具函数

一、Vue.util：Vue.js的工具函数集合

二、Vue.set：动态添加响应式属性

三、Vue.delete：删除响应式对象的属性

四、实际应用中的注意事项

常见考点

1. Vue 内置工具函数

问题：

考察点：

2. 自定义工具函数的常见应用

问题：

考察点：

3. Vue 的过滤器（Filters）

问题：

考察点：

什么是 `v-for`？

`in` 和 `of` 的概念

1. `in`：适用于数组、对象、整数范围

4.1 `.capture`