vue3学习笔记 - P1

1. 创建及引入的改变

- 创建vue3项目

通过脚手架vue-cli创建

npm install -g @vue/cli 或 yarn global add @vue/cli vue create app-name 或 通过ui页面进行创建

- 项目中引入vue3

vue3引入方式

import { createApp } from 'vue'; //引入工厂函数 import App from './App.vue'; //导入app组件 const app = createApp(App) app.mount('#app')

vue2引入方式

import Vue from 'vue' import App from './app.vue' new Vue({ render: h => h(App) }).$mount('#app')

vue3的组件可以不写根标签，vue3会自动的将元素包裹到一个fragment中

2. 组合式API

- setup配置项

vue3新增了setup配置项，原有的data、methods、computed等等配置项都可以在setup中书写，setup在beforeCreate之前执行一次，此时this值为undefined，所以在setup中不推荐使用this，有以下几个注意点：

1. 其值是一个函数，里面可以写属性方法等
2. 可以传递两个参数：props、context
3. 需要return一个对象，将模板所需的属性或方法返回
4. 不能书写异步方法（通常来看）

setup: function(props, context) { let name = 'wmh', let age = 18 return { name, age } }

setup的参数问题：

1. props：值为一个对象，包含组件外部传递过来，且在组件内部通过props配置项声明接收了的属性，
2. context：上下文对象，包含三个内容
   • attrs：值为对象，包含组件外部传递过来，但没有在props配置中声明的属性
   • slots：收到的插槽内容
   • emit：分发自定义事件的函数，需要配置emits配置项

3. 响应式API

1. ref和reactive：响应式函数

ref和reactive函数：响应性基础api

import { ref } from 'vue' //导入ref函数 setup() { let name = ref('wmh') //接收一个值并返回一个响应式可变的ref对象（引用对象） name.value = 'wyz' //需要通过.value操作值 return { name } }

import { creative } from 'vue' //导入creative函数 setup() { let person = creative({ //返回一个reactive对象（代理对象） name:'wmh', age: 18 }) person.name = 'wyz' //不需要通过.value操作值 return { person } }

ref和reactive的对比：

1. 从定义数据类型看：ref用来定义基本数据类型，也可以用来定义对象及数组，其内部会自动通过reactive转为代理对象；reactive用来定义对象或数组
2. 从响应式原理看：ref函数是通过object.defineProperty的set、get实现数据拦截，从而实现响应式；reactive函数则是通过proxy（代理）实现数据拦截，通过reflect操作属性
3. 从使用方式看：ref需要使用.value来操作属性，但模板输出时不需要；reactive则是都不需要.value

2. computed：计算属性函数

使用方式类似vue2，但定义有些许不同，用代码演示

import { computed } from 'vue' //导入computed函数 //以下代码书写在setup配置项中 // 写法一：简写 let fullName = computed({ return firstName + lastName }) // 写法二：完整写法 let fullName = computed({ get(){ return firstName + lastName } set(){} })

2. watch：侦听函数

1. 普通watch函数

类似vue2的watch配置项，书写在setup配置项中，需要注意的是，它监听的是一个reactive或ref对象，意思是，在这里侦听时不需要.value，

• 通过import导入：

import { watch } from 'vue' //导入watch函数 let count = ref(0) //定义一个ref对象 let count1 = ref(18) let person = reactive({ //定义一个代理对象 name: 'wmh', age: 18 })

• 监听单一属性：

// 监听ref对象 watch(count, (count, oldCount) => { /* ... */ }) // 监听代理对象 watch(person, person => { /* ... */ })

监听reactive包裹的代理对象时，oldValue无法正确获得且强制开启深度监视

• 监听代理对象的某个具体属性：

// 监听person的name属性 watch(() => person.name, (value, oldValue) => { /* ... */ })

监视reactive定义的数据中的某个属性时，deep配置生效（需要手动配置深度监视）
注意，此处oldValue可以正确获得

• 监听代理对象的某些具体属性：用数组包裹

// 监听person的name和age属性 watch([() => person.name,() => person.age], (value, oldValue) => { /* ... */ })

• 监听多个属性：用数组包裹

// 监听多个属性 watch([count, count1], ([count, count1], [oldCount, oldCount1]) => { /* ... */ })

2. watchEffect函数

不同于普通的watch函数，既需要指明侦听的属性，也需要指明回调，watchEffect不用指明侦听哪个属性，侦听的回调中用到哪个属性，就侦听哪个属性

import { watchEffect } from 'vue' let name = ref('wmh') let age = ref(18) // 以下代码使用到name和age属性，则会自动监听这两个属性 watchEffect(() => { const x1 = name.value const x2 = age.value })

watchEffect和computed的对比：

• computed注重的是计算出来的值（回调函数的返回值），所以必须要返回值
• watchEffect则更加注重过程（回调函数的函数体），所以不需要返回值