Vu3系统性学习之基础使用（一）

简言

vue3现在已经是比较普遍技术，所以系统的学习下是非常有必要的。以前我已经了解过一次vue3,这次是一个系统性的回顾和记录。这个篇文章主要介绍以下模块的使用：

• 使用Vue3
• 创建应用
• 模板语法
• vue3响应式基础使用
• 样式绑定
• 条件渲染和列表渲染
• 事件处理
• 侦听器
• 生命周期

话不多说,不玩虚的，let’s go！ ——ZSK666

使用vue3

利用Vite构建vue应用

1.首先安装node
2.打开cmd,vscode中可以按ctrl+`打开内置的命令行工具
3. npm init vue@latest 创建vue项目。然后，你将会看到一些诸如TypeScript 和测试支持之类的可选功能提示，第一个是输入项目名（建议不使用中文），剩下的都是一些插件，想用选择yes（按键盘左右箭头）后回车，默认no,不想用直接回车
4. cd 项目名
5. npm install
6. npm run dev
详情见官网vue3官网创建vue应用

利用CDN使用vue

你可以借助 script 标签直接通过 CDN 来使用 Vue：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

详情见官网使用CDN创建vue应用

创建应用

1. createApp(创建)

每个Vue应用都是通过createApp函数创建一个新的应用实例。此函数中可传入一个对象，这个对象就是一个组件；每个应用实例都需要一个“根组件”(页面入口),其他组件作为其子组件。

//	引入createApp函数
import {createApp} from 'vue'
//	引入根组件
import App from './App.vue'
//	返回根实例
const app = createApp(
	/*根组件对象*/
	App
)

2. mount（挂载）

创建好的应用实例需要调用mount()方法后才可以渲染出来。此方法接收一个参数，可以是dom元素或者是一个css选择器字符串。

<div id = "app"><div>

//	引入createApp函数
import {createApp} from 'vue'
//	引入根组件
import App from './App.vue'
//	返回根实例
const app = createApp(
	/*根组件对象*/
	App
)
//#app指上文div
app.mount('#app')

至此，一个简单的vue应用就创建好了。除此之外，我们还可以利用vue3应用实例暴露出来的config对象配置一些其他选项。例如app.config.errorHandler可以配置应用级错误处理。

模板语法

vue3和vue2在模板这块比较相似，自定义了一套基于html的模板语法；在模板里我们可以使用原生dom元素，也可以使用vue为了更好的将属性和数据添加到页面中增加的专属的元素属性和指令。这里只介绍vue自己增加的属性或指令使用方法

1. 文本插值

双花括号表示文本插值。花括号里面可以是动态显示数据的属性名，也可以是js表达式,或者没有副作用（不会影响属性数据变化）的函数、js内置方法等。

<div> {{message}}</div>
<div> {{data?.message}}</div>
<div> {{toString(message)}}</div>
<div> {{ message.split('').reverse().join('') }}</div>
<div> {{ !!flag ? message : 'message没值'}}</div>

2. 指令

以v-开头的属性在模板中具有特殊意义，例如v-bind,v-html,v-if,v-for,v-on等第。这里只做简单介绍，v-html是将html字符串数据以html的形式显示（有xss风险）；v-bind作用是将属性和dom元素做绑定，简写：；v-if条件判断渲染；v-for列表渲染；v-on事件处理。指令修饰的数据是响应式的，即属性数据改变指令结果也会随之更改。

//	v-bind 绑定数据
<div v-bind="message "> </div>
//	v-for列表渲染
<div v-for="item of [1,2,3]"> message </div>
//	v-if条件渲染
<div v-if="true"> message </div>
//	v-html html文本输出
<div v-html="message">  </div>
//	v-on 事件处理
<div v-on:click="()=>{}">  </div>

vue3响应式基础使用

vue3使用js时可以选择使用选项式和组合式，选项式和vue2的使用方法非常相似，这里不再描述，所以主要使用组合式api编写js代码。

1.响应式对象

vue3对响应式这块底层代码进行了重构，使用了js的Proxy来跟踪对象实现数据的改变和访问操作。这里不讲其原理，vue3暴露出来了几个函数来将普通对象变成响应式对象，例如reactive()方法。

<div @click="add">{{obj.name}}:{{obj.age}}</div>

//	引入 reactive
import {reactive} from 'vue'
export default {
//	setup是一个专门使用组合式api的钩子函数
	setup(){
	//	定义响应式对象，返回普通对象的Proxy(代理)
	const obj = reactive({
		name:'ZSK666^v^',
		age:18,
	})
	const add = ()=>{
	obj.age++
	}
	
	//	将用到的数据或函数暴露到模板中
	return {
		obj,
		add
	}
	}
}

手动暴露数据和函数比较麻烦，在编写单文件组件时，可以使用<script setup></script>编写代码，里面的状态和函数可以直接在改组件模板中使用。
reactive的特点

• 响应性是深层的，依靠深层响应性，响应式对象内的嵌套对象依然是代理。
• 只对对象类型有效（对象、数组和Map、Set这样的集合类型）。
• 将响应对象内的值解构或赋到其他变量中，新获得的属性将失去响应性。
• 响应性对象和本身对象不全等，改变本身对象不会触发更新，建议使用响应性对象（本身对象的代理）来改变数据。

2. 响应式变量

vue提供的ref()方法允许我们创建可以使用任何值类型的响应式ref,返回带value属性的ref对象。

import { ref } from 'vue'
const count = ref(0)
//	{value:0}
console.log(count)
//	0
console.log(count.value)
count.value++
//	1
console.log(count.value)

ref有以下特点：

• ref可以为任何类型的数据绑定响应性，且解构和属性传递不会失去响应性。
• ref对象是顶层属性时在模板中自动解包，不用再.value访问。
• ref对象再次ref()后会替换旧的ref;再次reactive()后会自动解包。
• $ref是ref.value的语法糖，使用$ref的绑定的属性可以不用.value访问。

3. 计算属性

vue的计算属性是对依赖属性进行进一步的处理后返回的ref属性。当依赖属性改变后，计算属性也会更新。
vue3提供了一个computed方法，可以用来定义计算属性：

<div>{{obj.name}}的状态：{{objCom}}</div>

import {reactive,computed} from 'vue'
const obj = reactive({
	name:'zsk',
	age:18
})
const objCom = computed(()=>{
return obj.age >20 ? '老了':'年轻'
})
//	可写计算属性
//	computed可以接受一个包含getter和setter的对象，以此来实现计算属性可写
const writeCom = computed({
	get(){
	return obj.age +10
	},
	set(val){
		//	writeCom 手动改变后的逻辑
		if(val > 30){
			obj.name = 'not zsk'
		}
	}
})

样式绑定

样式绑定主要使用v-bind命令。一般分为两种样式绑定：class绑定和style绑定；vue专门为这两种绑定的v-bind语法做了增强，下面依次介绍。

1.class绑定

class绑定有以下特点：

• 可以传递一个对象或数组
• 可以传递一个动态（响应性）对象
• 传递数组时，数组项可以是对象
• 组件元素使用class时默认绑定到组件根元素，可以使用$attrs属性来指定被绑定的元素

 <!-- 绑定对象 -->
<div :class="{isFlag:true,flag ? 'no':'yes'}"></div>

 <!-- 绑定数组 -->
<div :class="[isActive ? activeClass : '', errorClass,'box']"></div>

 <!-- 组件使用(不用带v-bind,自动传递) -->
<div class="foo bar"></div>

2.style绑定

绑定内联样式（style）有以下特点：

• 可以绑定一个对象或数组，方式和绑定clas类似
• 某些样式vue会自动带浏览器前缀。
• 一个样式属性可以以数组形式指定多个值，然后仅会渲染浏览器支持的最后一个值。

<!-- 绑定对象 -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<!-- 绑定数组 -->
<div :style="[baseStyles, overridingStyles]"></div>

<!-- 绑定多个值 -->
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>

条件渲染和列表渲染

1.条件渲染

vue里的条件渲染和js的if语句特别类似，只不过带有v-前缀。例如：v-if、v-if 和v-else等。
条件渲染有以下形式：

• v-if - - -指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染。
• v-else - - - 是最近一个带有v-if元素的else区块，当v-if为假时，渲染v-else元素内容。
• v-else-if - - - 和v-else类似，只不过加了条件判断，条件为真时才会渲染。
• v-show - - - v-show是根据条件真假，来显示元素内容（控制元素的display属性）。无论条件是否真假，都会渲染。

<!-- v-if 和 v-else -->
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>

<!-- v-if 和 v-else-if 和v-else -->
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>
<!-- <template> 元素上使用条件判断，可以同时判断多个元素 -->
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

<!-- v-show -->
<h1 v-show="ok">Hello!</h1>

2.列表渲染

我们可以使用 v-for 指令基于一个数组来渲染一个列表。v-for 指令的值需要使用 item in items 形式的特殊语法，其中 items 是源数据的数组，而 item 是迭代项的别名：

• v-for=" item in items" ,其中’in’可以是’of’，items代表可迭代数据（数组、对象、集合），item是可迭代数据的其中一项；意思是对可迭代数据的每一项进行渲染。
• v-for=“(item, index) in items” , 第二个参数可以是索引。
• v-for=“(value, key, index) in myObject”，当可迭代数据是对象时，value参数是当前项值，key参数代表当前项的key,index代表当前项的索引。
• v-for=“item in items” - - :key=“item.id” 。Vue 默认按照“就地更新”的策略来更新通过 v-for 渲染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。默认模式是高效的，但只适用于列表渲染输出的结果不依赖子组件状态或者临时 DOM 状态 (例如表单输入值) 的情况。为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute。（vue3不需要手动指定key值，会自动指定一个唯一的key；建议不手动指定）
• v-for所遍历的数据， Vue 能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：
  push()
  pop()
  shift()
  unshift()
  splice()
  sort()
  reverse()
  （意思是改变v-for使用的可迭代数据，vue可以触发对应的模板更新）

<!-- v-for -->
<li v-for="item in items">
  {{ item.message }}
</li>

<!-- v-for 对象 -->
<li v-for="(value, key, index) in myObject">
  {{ index }}. {{ key }}: {{ value }}
</li>

<!-- v-for + key -->
<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

v-for 与 v-if

当它们同时存在于一个节点上时，v-if 比 v-for 的优先级更高。这意味着 v-if 的条件将无法访问到 v-for 作用域内定义的变量别名。（同时使用 v-if 和 v-for 是不推荐的，因为这样二者的优先级不明显）

事件处理

1.监听事件

我们可以使用 v-on 指令 (简写为 @) 来监听 DOM 事件，并在事件触发时执行对应的 JavaScript。用法：v-on:click=“methodName” 或 @click=“handler”。事件处理器的值可以是：

• 内联事件处理器：事件被触发时执行的内联 JavaScript 语句 (与 onclick 类似)。

• 方法事件处理器：一个指向组件上定义的方法的属性名或是路径。

<!-- 内联事件处理器 count为js的响应性属性 -->
<button @click="count++">Add 1</button>
<p>Count is: {{ count }}</p>

<!--在内联事件处理器中访问事件参数 使用特殊的 $event 变量 -->
<button @click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

<!-- 使用内联箭头函数 -->
<button @click="(event) => warn('Form cannot be submitted yet.', event)">
  Submit
</button>

<!-- 方法事件处理器 add为js的自定义方法 -->
<!-- `greet` 是上面定义过的方法名 -->
<button @click="add">Add 1</button>

2.触发方式

就是上图的Argument；常见的有click、enter、blur、input、change等等。和js的事件触发方式比较相似，只是名称不一样。

3.事件修饰符

Vue 为 v-on 提供了事件修饰符。修饰符是用 . 表示的指令后缀，包含以下这些：

<!-- 单击事件将停止传递,阻止冒泡或捕获，相当于event.stopPropagation() -->
<a @click.stop="doThis"></a>

<!-- 提交事件将不再重新加载页面（阻止默认行为，相当于event.preventDefault()） -->
<form @submit.prevent="onSubmit"></form>

<!-- 修饰语可以使用链式书写 -->
<a @click.stop.prevent="doThat"></a>

<!-- 也可以只有修饰符 -->
<form @submit.prevent></form>

<!-- 仅当 event.target 是元素本身时才会触发事件处理器 -->
<!-- 例如：事件处理器不来自子元素 -->
<div @click.self="doThat">...</div>

使用修饰符时需要注意调用顺序，因为相关代码是以相同的顺序生成的。因此使用 @click.prevent.self 会阻止元素及其子元素的所有点击事件的默认行为而 @click.self.prevent 则只会阻止对元素本身的点击事件的默认行为。

另外，.capture、.once 和 .passive 修饰符与原生 addEventListener 事件相对应：

<!-- 添加事件监听器时，使用 `capture` 捕获模式 -->
<!-- 例如：指向内部元素的事件，在被内部元素处理前，先被外部处理 -->
<div @click.capture="doThis">...</div>

<!-- 点击事件最多被触发一次 -->
<a @click.once="doThis"></a>

<!-- 滚动事件的默认行为 (scrolling) 将立即发生而非等待 `onScroll` 完成 -->
<!-- 以防其中包含 `event.preventDefault()` -->
<div @scroll.passive="onScroll">...</div>

其次，还有按键和鼠标修饰符。Vue 为一些常用的按键提供了别名：
.enter
.tab
.delete (捕获“Delete”和“Backspace”两个按键)
.esc
.space
.up
.down
.left
.right
.ctrl
.alt
.shift
.meta
.exact 修饰符允许控制触发一个事件所需的确定组合的系统按键修饰符。
这些修饰符将处理程序限定为由特定鼠标按键触发的事件：
.left
.right
.middle

<!-- 仅在 `key` 为 `Enter` 时调用 `submit` -->
<input @keyup.enter="submit" />

<!-- 仅会在 $event.key 为 'PageDown' 时调用事件处理 -->
<input @keyup.page-down="onPageDown" />

<!-- Alt + Enter -->
<input @keyup.alt.enter="clear" />

<!-- Ctrl + 点击 -->
<div @click.ctrl="doSomething">Do something</div>

<!-- 当按下 Ctrl 时，即使同时按下 Alt 或 Shift 也会触发 -->
<button @click.ctrl="onClick">A</button>

<!-- 仅当按下 Ctrl 且未按任何其他键时才会触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>

<!-- 仅当没有按下任何系统按键时触发 -->
<button @click.exact="onClick">A</button>

4.表单输入绑定

在前端处理表单时，我们常常需要将表单输入框的内容同步给 JavaScript 中相应的变量。手动连接值绑定和更改事件监听器可能会很麻烦：

<input
  :value="text"
  @input="event => text = event.target.value">

v-model 指令帮我们简化了这一步骤：

<input v-model="text">

另外，v-model 还可以用于各种不同类型的输入，<textarea>、<select> 元素。它会根据所使用的元素自动使用对应的 DOM 属性和事件组合：

• 文本类型的\ 和\ 元素会绑定 value property 并侦听 input 事件；
• <input type=“checkbox”> 和 <input type=“radio”> 会绑定 checked property 并侦听 change 事件；
• <select> 会绑定 value property 并侦听 change 事件。

v-model 会忽略任何表单元素上初始的 value、checked 或 selected attribute。它将始终将当前绑定的 JavaScript 状态视为数据的正确来源。

<!-- `picked` 在被选择时是字符串 "a" -->
<input type="radio" v-model="picked" value="a" />

<!-- `toggle` 只会为 true 或 false -->
<input type="checkbox" v-model="toggle" />

<!-- `selected` 在第一项被选中时为字符串 "abc" -->
<select v-model="selected">
  <option value="abc">ABC</option>
</select>

<select v-model="selected">
  <!-- 内联对象字面量 -->
  <option :value="{ number: 123 }">123</option>
</select>

<!-- 在 "change" 事件后同步更新而不是 "input" -->
<input v-model.lazy="msg" />

<!-- 用户输入自动转换为数字 -->
<input v-model.number="age" />
<!-- 默认自动去除用户输入内容中两端的空格 -->
<input v-model.trim="msg" />

侦听器

侦听器作用是依赖某些属性或对象来做出相应的改变。和计算属性有些相似，但可以执行一些副作用：例如更改 DOM，或是根据异步操作的结果去修改另一处的状态。
在组合式 API 中，我们可以使用 watch 函数在每次响应式状态发生变化时触发回调函数：

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

const question = ref('')
const answer = ref('Questions usually contain a question mark. ;-)')

// 可以直接侦听一个 ref,这里监听question,
watch(question, async (newQuestion, oldQuestion) => {
//	当question发生改变后，触发回调函数，回调函数参数为question新值和旧值
  if (newQuestion.indexOf('?') > -1) {
    answer.value = 'Thinking...'
    try {
      const res = await fetch('https://yesno.wtf/api')
      answer.value = (await res.json()).answer
    } catch (error) {
      answer.value = 'Error! Could not reach the API. ' + error
    }
  }
})

/*
watch 的第一个参数可以是不同形式的“数据源”：它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组：
*/
const x = ref(0)
const y = ref(0)

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

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

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})
// 注意，你不能直接侦听响应式对象的属性值，例如:
const obj = reactive({ count: 0 })

// 错误，因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})
//这里需要用一个返回该属性的 getter 函数
// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

</script>

<template>
  <p>
    Ask a yes/no question:
    <input v-model="question" />
  </p>
  <p>{{ answer }}</p>
</template>

2.深层侦听

watch()传入一个响应式对象时默认深层监听；传入有返回值一个函数时，是浅层的，可以传入第三个参数对象{deep:true},手动开启深层侦听

watch(
  () => state.someObject,
  () => {
    // 仅当 state.someObject 被替换时触发
  }
)

watch(
  () => state.someObject,
  (newValue, oldValue) => {
    // 注意：`newValue` 此处和 `oldValue` 是相等的
    // *除非* state.someObject 被整个替换了
  },
  { deep: true }
)

3.watchEffect

watch() 是懒执行的：仅当数据源变化时，才会执行回调。但在某些场景中，我们希望在创建侦听器时，立即执行一遍回调。举例来说，我们想请求一些初始数据，然后在相关状态更改时重新请求数据。我们可以这样写：

const url = ref('https://...')
const data = ref(null)

async function fetchData() {
  const response = await fetch(url.value)
  data.value = await response.json()
}

// 立即获取
fetchData()
// ...再侦听 url 变化
watch(url, fetchData)


//使用watchEffect优化
//	先根据初始值执行一次，依赖源发生改变后再触发执行
watchEffect(async () => {
	//	自动分析响应性依赖源，
  const response = await fetch(url.value)
  data.value = await response.json()
})

watch vs. watchEffect

watch 和 watchEffect 都能响应式地执行有副作用的回调。它们之间的主要区别是追踪响应式依赖的方式：

• watch 只追踪明确侦听的数据源。它不会追踪任何在回调中访问到的东西。另外，仅在数据源确实改变时才会触发回调。watch 会避免在发生副作用时追踪依赖，因此，我们能更加精确地控制回调函数的触发时机。

• watchEffect，则会在副作用发生期间追踪依赖。它会在同步执行过程中，自动追踪所有能访问到的响应式属性。这更方便，而且代码往往更简洁，但有时其响应性依赖关系会不那么明确。

4. 改变触发回调机制

侦听器默认是在dom更新前触发，可以添加第三个参数对象{flush:‘post’},改变成dom更新后触发。

watch(source, callback, {
  flush: 'post'
})

watchEffect(callback, {
  flush: 'post'
})
//	后置刷新的 watchEffect() 有个更方便的别名 watchPostEffect()：
import { watchPostEffect } from 'vue'

watchPostEffect(() => {
  /* 在 Vue 更新后执行 */
})

5. 停止侦听器

在 setup() 或 <script setup> 中用同步语句创建的侦听器，会自动绑定到宿主组件实例上，并且会在宿主组件卸载时自动停止。异步创建的侦听器则需要自己停止，停止方法：存储侦听器的返回值，以执行函数形式执行返回值。

<script setup>
import { watchEffect } from 'vue'

// 它会自动停止
watchEffect(() => {})

// ...这个则不会！
setTimeout(() => {
  watchEffect(() => {})
}, 100)

//	要手动停止一个侦听器，请调用 watch 或 watchEffect 返回的函数：
const unwatch = watchEffect(() => {})

// ...当该侦听器不再需要时
unwatch()

</script>

生命周期

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到 DOM，以及在数据改变时更新 DOM。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。

1. setup

第一步先执行setup函数或<script setup>。这个是vue3新出的语法，可以在里面利用组合式api写一些数据处理和逻辑处理，不过在里面访问不到this实例。

2. beforeCreate

会在实例初始化完成、props 解析之后、data() 和 computed 等选项处理之前立即调用。可以利用这个函数在dom没渲染之前做一些数据请求。

3.created

在组件实例处理完所有与状态相关的选项后调用。当这个钩子被调用时，以下内容已经设置完成：响应式数据、计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此 $el 属性仍不可用。可以利用这个函数在dom没渲染之前做一些数据请求。

4.beforeMount

在组件被挂载之前调用。当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
这个钩子在服务端渲染时不会被调用。可以利用这个函数在dom没挂载之前对数据进行处理。

5.mounted

在组件被挂载之后调用。组件在以下情况下被视为已挂载：

• 所有同步子组件都已经被挂载。(不包含异步组件或 树内的组件)

• 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端被调用。
这个钩子在服务端渲染时不会被调用。

6. beforeUpdate

在组件即将因为一个响应式状态变更而更新其 DOM 树之前调用。这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。
这个钩子在服务端渲染时不会被调用。

7.updated

在组件因为一个响应式状态变更而更新其 DOM 树之后调用。父组件的更新钩子将在其子组件的更新钩子之后调用。
这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。这个钩子在服务端渲染时不会被调用。（不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！）

8.beforeUnmount

在一个组件实例被卸载之前调用。当这个钩子被调用时，组件实例依然还保有全部的功能。这个钩子在服务端渲染时不会被调用。可以做一些组件销毁后的处理，例如清除定时器等。

9.unmounted

在一个组件实例被卸载之后调用。一个组件在以下情况下被视为已卸载：

• 其所有子组件都已经被卸载。

• 所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止。

可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接。

这个钩子在服务端渲染时不会被调用。

这些生命周期中，一般beforeCreate()、setup、mounted()使用频繁，建议熟练使用，其他了解即可。