Vue3入门--干货

Onion
173 阅读4分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第8天，点击查看活动详情。

介绍

2020年9月18日，正式发布。性能提升了、源码升级了、更好的支持TypeScript、组合API等。

如何创建一个Vue3的小项目

使用脚手架创建项目链接

## 查看@vue/cli版本，确保@vue/cli版本在4.5.0以上
vue --version
## 安装或者升级你的@vue/cli
npm install -g @vue/cli
## 创建项目
vue create vue_test
## 运行
npm run serve

使用Vite创建项目Vue使用Vit &&Vite官网

使用Vite需要node.js12以上版本，安装vite：

##全局安装vite
npm install create-vite-app -g

## 创建项目
npm init vite-app `projectname`
## 安装依赖
npm install
## 运行
npm run dev

常用的组合API

setup

  1. 定义：Vue3.0中一个新的配置项，值为一个函数。
  2. setup是所有 Composition API（组合API） 展现技能的地方,在beforeCreate之前执行一次，this指向undefined。
  3. 组件中所用到的：数据、方法等等，均要配置在setup中。
  4. setup函数的两种返回值：
    1. 若返回一个对象，则对象中的属性、方法, 在模板中均可以直接使用。（重点）
    2. 若返回一个渲染函数：则可以自定义渲染内容。（了解）
  5. 注意：
    1. 尽量不要和Vue2.x配置混用
      • Vue2.x配置（data、methos、computed...）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问到Vue2.x配置（data、methos、computed...）。
      • 如果有重名, setup优先。
    2. setup不能是一个async函数，因为返回值不再是return的对象, 而是promise, 模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）
  6. setup的参数
    • props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
    • context：上下文对象
    • attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性, 相当于 this.$attrs。
    • slots: 收到的插槽内容, 相当于 this.$slots。
    • emit: 分发自定义事件的函数, 相当于 this.$emit。

ref函数

  • 作用: 定义一个响应式的数据
  • 语法: const val = ref(initValue)
    • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
    • JS中操作数据： XXX.value
    • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
  • 注意：
    • ref中可以接受的数据：基本类型、也可以是对象类型。
    • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
    • 对象类型的数据：响应式依靠的是内部调用了Vue3.0中的一个新函数—— reactive函数。

reactive函数

  • 作用: 定义一个对象类型的响应式数据（基本类型不建议用它，可用ref函数）
  • 语法：const 代理的对象= reactive(源对象)接收一个对象（或数组），返回一个代理的实例对象
  • 备注：reactive定义的响应式数据是“深度的”。内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

watch函数

  • Vue3中的watch函数与Vue2中的配置功能一致，
  • 注意点
    • 监听reactive定义的响应式数据的时候oldvalue无法正确获取、强制开启了深度监听（deep配置无用）
    • 监听reactive定义的响应式数据中某个属性时deep有效
---------------------------------------------------------------------------------
let sum=ref(XXX)
let msg=ref(XXX)
let obj={name:"张三",job:"搬运工"}//源对象
const person=(obj)//person代理的对象
---------------------------------------------------------------------------------
 //情况一：监视ref定义的响应式数据
 watch(sum,(newValue,oldValue)=>{
 	console.log('sum变化了',newValue,oldValue)
 },{immediate:true})
 //情况二：监视多个ref定义的响应式数据
 watch([sum,msg],(newValue,oldValue)=>{
 	console.log('sum或msg变化了',newValue,oldValue)
 }) 
 //情况三：监视reactive定义的响应式数据
 watch(person,(newValue,oldValue)=>{
 	console.log('person变化了',newValue,oldValue)
 },{immediate:true,deep:false}) //此处的deep配置不再奏效
 //情况四：监视reactive定义的响应式数据中的某个属性
 watch(()=>person.job,(newValue,oldValue)=>{
 	console.log('person的job变化了',newValue,oldValue)
 },{immediate:true,deep:true}) 
 //情况五：监视reactive定义的响应式数据中的某些属性
 watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
 	console.log('person的job变化了',newValue,oldValue)
 },{immediate:true,deep:true})

watchEffect函数

使用watchEffect函数时，不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视那个属性。

//watchEffect回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const a = sum.value
    const b = person.age
    console.log('watchEffect配置的回调执行了')
})

toRef

  • 作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
  • 语法：const name = toRef(person,'name')
  • 应用: 要将响应式对象中的某个属性单独提供给外部使用时。
avatar
文章
阅读
粉丝