目录

前言

这些内容是博主在学习过程中记录下来的,有一些不重要的点就跳过了,需要时自行查询文档。其实V2V3的学习成本不高,熟悉V2的话,看完这篇文章就可以上手V3

Vue3官网

在线源码编译地址

1,setup


setup是所有Composition API的容器,值为一个函数。组件中所用到的数据、方法等等,均要配置在setup中,它会在beforeCreate之前执行一次,注意:V3this不再是指向Vue实例,访问this会是undefined

1.1,返回值


  • 若返回一个对象,则对象中的属性、方法, 在模板中均可以直接使用。
  • 若返回一个渲染函数:则可以自定义渲染内容。

1.2,注意点


尽量不要与V2配置混用

V2配置(datamethoscomputed...)中可以访问到setup中的属性、方法。

但在setup中不能访问到V2配置(datamethodscomputed...)。

如果有重名, setup优先。

setup不能是一个async函数

因为返回值不再return的对象, 而是promise, 模板看不到return对象中的属性。(后期也可以返回一个Promise实例,但需要Suspense和异步组件的配合)

1.3,语法


<script>
import { ref, reactive } from 'vue' export default {
name: 'Home',
setup(props, context) {
const title = ref('标题')
const data = reactive({
value: '哈哈哈'
})
return {
title,
data
}
}
}
</script>

1.4,setup的参数


  • props:值为对象,包含组件外部传递过来,且组件内部声明接收了的属性

  • context:上下文对象

    • attrs: 值为对象,包含组件外部传递过来,但没有在props配置中声明的属性, 相当于this.$attrs
    • slots: 收到的插槽内容, 相当于this.$slots
    • emit: 分发自定义事件的函数, 相当于this.$emit

2,ref 创建响应式数据


使用ref可以创建一个包含响应式数据的引用对象(reference对象,简称ref对象),可以是基本类型、也可以是对象。

语法

// 创建
const xxx = ref(value) // 使用
xxx.value // 在模板中
<div>{{xxx}}</div>

3,reactive 创建响应式数据


定义一个对象类型的响应式数据,内部基于ES6Proxy实现,通过代理对象操作源对象内部数据进行操作

语法

// 创建
const xxx = reactive({
xxx: ''
}) // 使用
xxx.xxx

4,computed 计算属性


V2computed配置功能一致

语法

import { computed } from 'vue'

setup(){
// 简写语法
let fullName = computed(() => {
return person.firstName + '-' + person.lastName
}) // 完整语法
let fullName = computed({
get(){
return person.firstName + '-' + person.lastName
},
set(value){
const nameArr = value.split('-')
person.firstName = nameArr[0]
person.lastName = nameArr[1]
}
}) return fullName
}

5,watch 监听


V2watch配置功能一致,语法有点改动

语法

  • 情况一:监视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监视的是reactive定义的响应式数据,则无法正确获得oldValue
// 若watch监视的是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 })
  • 特殊情况:此处由于监视的是reactive素定义的对象中的某个属性,所以deep配置有效
watch(() => person.job, (newValue, oldValue) => {
console.log('person的job变化了', newValue, oldValue)
}, { deep:true })

6,watchEffect 监听回调


watch的区别是,watch既要指明监视的属性,也要指明监视的回调。而watchEffect,不用指明监视哪个属性,监视的回调中用到哪个属性,那就监视哪个属性,不用写返回值。

语法

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

7,生命周期


生命周期全都写在setup

7.1,改变


  • beforeDestroy 改名为 beforeUnmount
  • destroyed 改名为 unmounted
  • beforeCreate => setup
  • created => setup
  • beforeMount => onBeforeMount
  • mounted => onMounted
  • beforeUpdate => onBeforeUpdate
  • updated => onUpdated
  • beforeUnmount => onBeforeUnmount
  • unmounted => onUnmounted

7.2,语法


setup() {
onMounted(() => {
console.log('mounted')
})
}

8,toRef 创建ref


创建一个ref对象,其value值指向另一个对象中的某个属性

语法

const state = reactive({
foo: 1,
bar: 2
}) const fooRef = toRef(state, 'foo') // 传递props
export default {
setup(props) {
useSomeFeature(toRef(props, 'foo'))
}
}

9,toRefs 响应式转换


将响应式对象转换为普通对象,其中结果对象的每个property都是指向原始对象相应propertyref

语法

const state = reactive({
foo: 1,
bar: 2
}) const stateAsRefs = toRefs(state)
// 此时state和stateAsRefs是关联的

10,shallowReactive 响应式外层转换


只处理对象最外层属性的响应式(浅响应式)。适用于:一个对象数据,结构比较深, 但变化时只是外层属性变化

语法

const state = shallowReactive({
foo: 1,
nested: {
bar: 2
}
})

11,shallowRef 基本数据响应式


只处理基本数据类型的响应式, 不进行对象的响应式处理。适用于:一个对象数据,后续功能不会修改该对象中的属性,而是生新的对象来替换

语法

const shallow = shallowRef({
greet: 'Hello, world'
})

12,readonly 响应式变只读


让一个响应式数据变为只读的(深只读),应用于不希望数据被修改时

语法

const shallow = shallowRef({
greet: 'Hello, world', // 只读
nested: {
bar: 2 // 只读
}
})

13,shallowReadonly 响应式变只读


让一个响应式数据变为只读的(浅只读),应用于不希望数据被修改时

语法

const shallow = shallowReadonly({
foo: 1, // 只读
nested: {
bar: 2 // 非只读
}
})

14,toRaw 响应式变非响应式


将一个由reactive生成的响应式对象转为普通对象,对这个普通对象的所有操作,不会引起页面更新。

语法

const foo = {}
const Foo = reactive(foo)
console.log(toRaw(Foo) === foo) // true

15,markRaw 标记永远不响应式


标记一个对象,使其永远不会再成为响应式对象,有些值不应被设置为响应式的,例如复杂的第三方类库等,当渲染具有不可变数据源的大列表时,跳过响应式转换可以提高性能。

语法

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false // 嵌套在其他响应式对象中时也可以使用
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

16,customRef 依赖更新控制


创建一个自定义的 ref,并对其依赖项跟踪和更新触发进行显式控制。它需要一个工厂函数,该函数接收tracktrigger函数作为参数,并且应该返回一个带有getset的对象。

语法

<script>
import { customRef } from 'vue' export default {
name: 'Home',
setup() {
// 实现防抖函数
const fn = function(value, delay = 500) {
let timeout
return customRef((track, trigger) => {
return {
get() {
track()
return value
},
set(newValue) {
clearInterval(timeout)
timeout = setTimeout(() => {
console.log(newValue)
value = newValue
trigger()
}, delay)
}
}
})
}
const keyword = fn('', 500)
return {
keyword
}
}
}
</script>

17,provide & inject 通信


实现祖与后代组件间通信,父组件有一个provide选项来提供数据,后代组件有一个inject选项来开始使用这些数据

语法

// 祖组件
setup(){
let car = reactive({ name:'奔驰', price:'40万' })
provide('car', car)
} // 后代组件
setup(props, context){
const car = inject('car')
return { car }
}

18,响应式数据的判断


18.1,isRef


检查一个值是否为一个ref对象

语法

const val = ref('xxx')
isRef(val) // true

18.2,isReactive


检查一个值是否为一个isReactive对象

语法

const val = isReactive({})
isRef(val) // true

18.3,isReadonly


检查一个对象是否是由readonly创建的只读代理

语法

const state = reactive({
name: 'John'
})
console.log(isReactive(state)) // true

18.4,isProxy


检查对象是否是由reactivereadonly创建的proxy

语法

const state = reactive({
name: 'John'
})
console.log(isProxy(state)) // true

19,teleport 移动dom组件


Teleport提供了一种干净的方法,允许我们控制在DOM中哪个父节点下渲染了HTML,而不必求助于全局状态或将其拆分为两个组件。

语法

<teleport to="移动位置">
<div v-if="isShow" class="mask">
<div class="dialog">
<h3>我是一个弹窗</h3>
<button @click="isShow = false">关闭弹窗</button>
</div>
</div>
</teleport> // to的格式
<teleport to="#some-id" />
<teleport to=".some-class" />
<teleport to="[data-teleport]" /> // disabled的格式
<teleport to="#popup" :disabled="displayVideoInline">
<video src="./my-movie.mp4">
</teleport>

20,Suspense 异步渲染组件


等待异步组件时先渲染一些额外内容,让应用有更好的用户体验

语法

<template>
<div class="app">
<h3>我是App组件</h3>
<Suspense>
<template #default>
<Child/>
</template>
<template #fallback>
<h3>加载中.....</h3>
</template>
</Suspense>
</div>
</template> import { defineAsyncComponent } from 'vue'
const Child = defineAsyncComponent(() => import('./components/Child.vue')) components: {
Child
}

21,全局API调整


将全局的API,即:Vue.xxx调整到应用实例(app)上

V2的api V3的api
Vue.config.xxxx app.config.xxxx
Vue.component app.component
Vue.directive app.directive
Vue.mixin app.mixin
Vue.use app.use
Vue.prototype app.config.globalProperties

22,移除api


名称 现状
Vue.config.productionTip 已移除
config.keyCodes 已移除
$children 已移除
$listeners 已移除
$on 已移除
$off 已移除
$once 已移除
filters 已移除
.native 已移除

23,Ref 获取DOM


由于V3中不在存在this,所以ref的获取调整了

23.1,单个ref


语法

<div ref="Qrcode" class="qr_codeode_url" />

import { ref } from 'vue'

export default {
setup() {
const Qrcode = ref(null)
// 挂载后
onMounted(() => {
console.log(Qrcode.value)
})
return {
Qrcode
}
}
}

23.2,循环中的ref


V3中在for循环元素上绑定ref将不再自动创建$ref数组。要从单个绑定获取多个ref,请将ref绑定到一个更灵活的函数上

语法

<div v-for="item in list" :ref="setItemRef"></div>

import { onBeforeUpdate, onUpdated } from 'vue'

export default {
setup() {
let itemRefs = []
const setItemRef = el => {
if (el) {
itemRefs.push(el)
}
}
onBeforeUpdate(() => {
itemRefs = []
})
onUpdated(() => {
console.log(itemRefs)
})
return {
setItemRef
}
}
}
  • itemRefs不必是数组:它也可以是一个对象,其ref可以通过迭代的key被设置
  • 如有需要,itemRef也可以是响应式的,且可以被侦听

24,emits 自定义事件


定义一个组件可以向其父组件触发的事件

// 在子组件中
<h1 @click="father">{{ msg }}</h1> export default {
name: 'HelloWorld',
props: {
msg: {
type: String,
default: ''
}
},
emits: ['close'],
setup(props, { emit }) {
const father = function() {
emit('close', 'child')
}
return {
father
}
}
} // 在父组件中
<HelloWorld :msg="msg" @click="fn" @close="fn2" />

25,$nextTick 异步更新


使用方式修改

import { nextTick } from 'vue'

nextTick(() => {
// ...
})

26,hook 生命周期事件


通过事件来监听组件生命周期中的关键阶段

语法

// V2的语法
<template>
<child-component @hook:updated="onUpdated">
</template> // V3的语法
<template>
<child-component @vnode-updated="onUpdated">
</template> // 驼峰写法
<template>
<child-component @vnodeUpdated="onUpdated">
</template

如果看了觉得有帮助的,我是@鹏多多,欢迎 点赞 关注 评论;END


PS:在本页按F12,在console中输入document.querySelectorAll('.diggit')[0].click(),有惊喜哦


公众号

往期文章

个人主页

助你上手Vue3全家桶之Vue3教程的更多相关文章

  1. 助你上手Vue3全家桶之Vue-Router4教程

    目录 1,前言 1,Router 2.1,跳转 2.2,打开新页面 3,Route 4,守卫 4.1,onBeforeRouteLeave 4.2,onBeforeRouteUpdate 4.3,路由 ...

  2. 助你上手Vue3全家桶之VueX4教程

    目录 1,前言 2,State 2.1,直接使用 2.2,结合computed 3,Getter 3.1,直接使用 3.2,结合computed 4,Mutation 4.1,直接使用 4.2,结合c ...

  3. 开箱即用 yyg-cli(脚手架工具):快速创建 vue3 组件库和vue3 全家桶项目

    1 yyg-cli 是什么 yyg-cli 是优雅哥开发的快速创建 vue3 项目的脚手架.在 npm 上发布了两个月,11月1日进行了大升级,发布 1.1.0 版本:支持创建 vue3 全家桶项目和 ...

  4. 基于 vite 创建 vue3 全家桶项目(vite + vue3 + tsx + pinia)

    vite 最近非常火,它是 vue 作者尤大神发布前端构建工具,底层基于 Rollup,无论是启动速度还是热加载速度都非常快.vite 随 vue3 正式版一起发布,刚开始的时候与 vue 绑定在一起 ...

  5. vue3 vite2 封装 SVG 图标组件 - 基于 vite 创建 vue3 全家桶项目续篇

    在<基于 vite 创建 vue3 全家桶>一文整合了 Element Plus,并将 Element Plus 中提供的图标进行全局注册,这样可以很方便的延续 Element UI 的风 ...

  6. Vue3 全家桶,从 0 到 1 实战项目,新手有福了

    前端发展百花放,一技未熟百技出.未知何处去下手,关注小编胜百书. 我是前端人,专注分享前端内容! 本篇文章主要是,使用 vite 创建一个vue3 项目,实践 vie-router4 vuex4 结合 ...

  7. ⚡ vue3 全家桶体验

    前置 从创建一个简单浏览器导航首页项目展开,该篇随笔包含以下内容的简单上手: vite vue3 vuex4 vue-router next 预览效果有助于理清这些内容,限于篇幅,不容易展开叙述.由于 ...

  8. Vue3全家桶升级指南一composition API

    1.setup() vue3中的composition API中最重要的就是setup方法了,相当于组件的入口,所有的composition API都必须放到setup()中的使用. setup是在组 ...

  9. Vue3全家桶升级指南二ref、toRef、toRefs的区别

    ref是对原始数据的拷贝,当修改ref数据时,模板中的视图会发生改变,但是原始数据并不会改变. toRef是对原始数据的引用,修改toRef数据时,原始数据也会发生改变,但是视图并不会更新. 在vue ...

随机推荐

  1. Request 根据用户输入的信息获取输入到控制台

    html代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  2. iOS之多语言开发

    前要:iOS多语言开发,可以分为两种 系统设置,通过在手机设置中切换语言,进而改变app中语言: app中手动切换,用户在app中,手动选择语言,进行切换. 一.添加需要的语言 不管使用哪种方法,都需 ...

  3. 论文解读《Momentum Contrast for Unsupervised Visual Representation Learning》俗称 MoCo

    论文题目:<Momentum Contrast for Unsupervised Visual Representation Learning> 论文作者: Kaiming He.Haoq ...

  4. ECShop 文章添加缩略图功能

    为 ECShop 文章添加缩略图     ECShop 文章不包含缩略图比较遗憾,不过它的文章里包含一个附件上传,而且一般不会用到,这样,我们就可以改动一下,让它成为缩略图. 首先在 includes ...

  5. oracle 基础SQL语句 版本5.7.29

    一.表与用户介绍 oracle安装完成后默认会有很多用户,大致分为2类用户:一类是必需的帐户,一类是存储各种应用的帐户,默认密码如下: oracle自带的也会有很多默认表存在: 二.创建用户.创建表空 ...

  6. 看完小白也会使用,Android投屏神器scrcpy详细教程

    楔子 做为一个软件测试工程师,在使用手机测试的时候,缺陷附件想附上截图.视频,需要从手机把图片.视频发送到拷贝或发送到电脑,非常麻烦. 所以想到使用投屏软件,把手机的屏幕投屏到电脑,便可以直接在电脑上 ...

  7. python线程threading

    线程示例: import threading import time # 唱歌任务 def sing(): # 扩展: 获取当前线程 # print("sing当前执行的线程为:" ...

  8. css 样式设定

    阴影: --可以同时设定多个阴影.用逗号隔开 http://www.fly63.com/article/detial/4726 div { box-shadow: 10px 10px 5px #888 ...

  9. 修改CentOS ll命令显示时间格式

    临时更改显示样式,当会话结束后恢复原来的样式: export TIME_STYLE='+%Y-%m-%d %H:%M:%S' 永久改变显示样式,更改后的效果会保存下来 修改/etc/profile文件 ...

  10. Java安全之 ClassLoader类加载器

    Java安全之 ClassLoader类加载器 0x00 前言 前面这里抛出一个问题,Java到底是什么类型的编程语言?是编译型?还是解释型?在这个问题是其实一直都都有疑惑,如果说是解释型语言的话,那 ...