其实尼,此文章作者也是初学了vue3.0,稍微熟练的一些,所以来给大家稍微介绍一下,大佬勿喷哦.
先给大家介绍几个适合Vue3.0使用的vscode插件吧
Volar
第一个介绍Volar,使用vscode开发Vue项目的小伙伴么肯定都认识这个Volar这个神级插件,它就可以理解为Vue3的Vetur,有了这个插件可以让我们的开发如域得水,代码高亮,语法提示, 基本Vetur有的塔都有.
功能: 多个根节点编译器不会报错
Vue3是允许我们有多个根节点,但是我们使用Vetur,虽然吧影响允许,但是看起来就不好看了,所以当我们转向Volar那么就不会出现这个问题了
编译器分割
即便Vue的组件化开发，可以将单文件的代码长度大幅缩短，但还是动辄几百行甚是上千行。那么我们切换template，script和style的时候就要频繁上下翻，虽然有的插件可以直接定位到css，但是你回不去啊！所以这个功能简直是太人性化了。
安装完Volar以后，打开一个.vue文件，看vscode的右上角，有这么一个图标，点一下。
它就会自动给你分隔成三个页面，分别对应template，script和style，这样就太舒服了有没有
Composotion API
现在在到了重头戏 , Vue3的招牌特效 Composition API
Composition API 可以更方便的抽取公共的逻辑,但是不要过于在意逻辑代码复用,以功能提取代码也是一种思路, 另外顺便提一句,Vue3兼容大部分Vue2的语法,所以Vue3书写Vue2语法是没有问题的(已经废除的除外)，但是 如果我们已经升级Vue3,就不建议混合使用了,除非一些大型项目需要兼容两个版本.
SetUp
setup是组合 Composition API中的入口函数,也是第一个要使用的函数,
setup 只在初始化时只执行一次,所有 Composition API函数都在此使用
可以通过console.log看到setup是在beforeCreate生命周期之前执行的(只执行一次)
由此可推断setup执行的时候，组件对象还没有创建,组件实例对象this还不可用,此时this是undefined,不能通过this来访问组件所有实例 data/props/computed/methods
当setup函数如果返回一个对象,对象中的属性或方法,在模版中可以直接使用
注意:setup不能是一个async函数:因为返回值不再是return对象,而是promise,模版中就不可以使用return中返回的数据了
setup的参数(props,context)
props:是一个对象，里面有父级组件向子级组件传递的数据,并且是在子级组件中使用props接收到的所有属性
context:上下文对象,{attrs,slots,emit}
attrs:获取当前组件标签上所有没有通过props接收的属性的对象,相当于this.$attrs
slots:包含所有传入的插槽内容的对象,相当于this.$slots
emit:用来分发自定义事件的函数,相当于this.$emit
演示attrs和props
演示emit
ref作用
定义一个响应式的数据(一般用来定义一个基本类型的响应式事件undefined、null、boolean、number、string)
语法：
注意:script中操作数据需要使用xxx.value的形式,而模版中不需要添加.value
用一个例子来实现：一个按钮，点击可以增加数字
在Vue2中我们通过this.$refs来获取dom节点 ，Vue3中我们通过ref来获取节点
首先需要在标签上添加ref=‘xxx’，然后在setup中定义一个初始值为null的ref类型,名字和标签的ref属性一致
注意:一定要在setup的return中返回,不然会报错
就比如让输入框自动获取焦点:
reactive
语法:const proxy = reactive(obj)
作用:定义多个数据的响应式,接收一个普通对象然后返回该普通对象的响应式代理气对象(proxy),响应式转换是'深层的':会影响对象内部所有嵌套的属性,所有的数据都是响应式的
演示：
computed函数：
象
计算属性的函数中如果只传入一个回调函数 表示的是get操作
如果计算属性的函数可以传入一个对象,可以包含get和set函数,进行读取和修改的操作
watch函数:
与Vue2的watch配置功能一致
参数1：要监听的数据
参数2：回调函数
参数3：配置
作用：
监听指定的一个或多个响应式数据,一旦数据变化,就会自动执行监听回调
它在默认初始时不执行回调,但是可以通过配置immediate为true , 来指定初始时执行第一次,通过配置deep来进行深度监听
setup() {
const user = reactive({
firstName:0,
lastName:5
})
const fullName = ref('');
watch(
user,({firstName,lastName})=>{
console.log(firstName,lastName)
fullName.value = firstName + lastName
},
{immediate:true,deep:true}
)
return {
fullName,
user,
};
}watch 监听多个数据 使用数组
watch 监听非响应式数据的时候,需要使用回调函数的形式
setup() {
const user = reactive({
firstName: 0,
lastName: 5
})
const fullName = ref('');
watch([() => user.firstName, () => user.lastName], () => {
console.log("我执行了监听")
},{ immediate: true, deep: true })
return {
fullName,
user,
};
}watchEffect函数:
作用：
监听数据发生变化时执行回调,不用直接指定要监视的数据,回调函数中使用的哪些响应式数据就监听哪些响应式数据，默认初始时就会执行第一次,从而可以收集需要监听的数据
setup() {
const user = reactive({
firstName: 0,
lastName: 5
})
const fullName = ref('');
watchEffect(()=>{
fullName.value = user.firstName + user.lastName
})
const add=()=>{
user.firstName ++
}
return {
fullName,
user,
add
};
}生命周期对比
注意: 3.0的生命周期钩子要比2.0中相同的生命周期的钩子要快
Composition API 还新增了以下调试钩子函数: 但是不怎么常用
onRenderTracked onRenderTriggered
setup() {
onBeforeMount(() => {
console.log('--onBeforeMount')
})
onMounted(() => {
console.log('--onMounted')
})
onBeforeUpdate(() => {
console.log('--onBeforeUpdate')
})
onUpdated(() => {
console.log('--onUpdated')
})
onBeforeUnmount(() => {
console.log('--onBeforeUnmount')
})
onUnmounted(() => {
console.log('--onUnmounted')
})
} toRefs：
作用: 把一个响应式对象转换成普通对象,该普通对象的每个属性都是一个ref
应用:
我们使用reactive创建的对象,如果想在模版中使用,就必须得使用xxx.xxx的形式,如果大量用到的话还是很麻烦的,但是使用es6解构以后,会失去响应式,那么toRefs的作用就体现在这,利用toRefs可以将一个响应式reactive对象的所有原始属性转换为为响应式的ref属性,当然小伙伴们可以自行开发更多应用场景。
<template>
<div class="home">
<p>name:{{name}}</p>
<button @click="add">++</button>
</div>
</template>
<script>
import { computed, reactive, ref, watch ,watchEffect ,toRefs} from "vue"
export default {
setup() {
const state = reactive({
name:0,
})
const state1 = toRefs(state)
const add = ()=>{
state.name++
}
return {
// 通过toRefs放回的对象，解构出来的属性也是响应式的
...state1,
add
};
}
}
</script>