vue3初体验
# vue3初体验
# vue3的三种体验姿势
# 1.vite
vite是尤大开发的工具,估计是想取代webpack,体验的时候能清楚感受到速度之快。三种体验姿势最喜欢这种。
npm install -g create-vite-app
create-vite-app 01-vue3-vite
cd 01-vue3-vite
npm install
npm run dev
2
3
4
5
# 2.vue cli
官方定制的vue-cli 需要升级为最新版本才能体验
npm install -g @vue/cli
vue create 01-vue3-cli
cd 01-vue3-cli
vue add vue-next
npm run serve
2
3
4
5
6
# 3.webpack
直接干就完事
git clone https://github.com/vuejs/vue-next-webpack-preview.git 01-vue3-webpack
cd 01-vue3-webpack
npm install
npm run dev
2
3
4
# vue3的Composition APi
# setup
setup是一个新的选项,可以理解为composition的入口,在函数内部是在beforeCreate之前调用,函数return的内容内容作为渲染的上下文。
# reactive 和 ref
vue2的时候,组件实例在初始化的时候会将 data 整个对象变为可观察对象,通过递归的方式给每个 Key 使用 Object.defineProperty 加上 getter 和 settter , 如果是数组就重写代理数组对象的七个方法。虽然给我们带来的便利,但是在大型项目上来说,性能开销就很大了。
Vue3.0之后不再将主动监听所有的数据,而是将选择权给你,实例在初始化时不需要再去递归 data 对象了,从而降低了组件实例化的时间。
reactive函数接收一个对象作为参数,等价Vue2.x的Vue.observable()
ref接收一个原始值,返回一个包装对象
const count = ref(0) 等价 const count = reactive({value:0})
# toRef 和 toRefs
- toRef
- toRef 可以用来为一个 reactive 对象的属性创建一个 ref。这个 ref 可以被传递并且能够保持响应性。
const state = reactive({ a: 1, b: 2, }) const aRef = toRef(state, 'a') aRef.value++ console.log(state.a) // 2
1
2
3
4
5
6
7
8
9
10- 当要将一个 prop 中的属性作为 ref 传给组合逻辑函数时,toRef 就派上了用场:
export default { setup(props) { useSomeFeature(toRef(props, 'abc')) }, }
1
2
3
4
5 - toRefs
- toRefs把一个响应式对象转换成普通对象,该普通对象的每个 property 都是一个 ref ,和响应式对象 property 一一对应。
const state = reactive({ a: 1, b: 2, }) const stateRefs = toRefs(state) /* stateRefs 的类型如下: { a: Ref<number>, b: Ref<number> } */ // ref 对象 与 原属性的引用是 "链接" 上的 state.a++ console.log(stateRefs.a.value) // 2 stateRefs.a.value++ console.log(state.a) // 3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22- 解构 / 扩展(使用 ... 操作符)返回的对象,并不会丢失响应性:
const state = reactive({ newTodo: "", todos: [{ id: 1, title: "练习", isCheck: false }], }); console.log( ...toRefs(state)) 或者 const { newTodo } = toRefs(state)
1
2
3
4
5
6
7
8
9
# isRef
检查一个值是否为一个 ref 对象。
# unref
如果参数是一个 ref 则返回它的 value,否则返回参数本身。它是 val = isRef(val) ? val.value : val 的语法糖。
function useFoo(x: number | Ref<number>) {
const unwrapped = unref(x) // unwrapped 一定是 number 类型
}
2
3
# computed
这个属性在vue3里面还是跟vue2一样,感觉没什么变化。
# 全局important
vue2的data,methods,computed等都是挂载到this上,这样就会有一个问题,比如当前模块没有用到computed,那么打包的时候任然会打包computed功能。
所以vue3中,一般是需要用到什么API就去引入什么API,所以速度当然会快。
import { reactive, computed, onMounted } from "vue";
2
3
# vue3生命周期
beforeCreate -> 使用setup()
created -> 使用setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
# 初体验CODE
<template>
<h1>{{state.count}} * 2</h1>
<h1>{{double}}</h1>
<button @click="add">累加</button>
</template>
<script>
import { reactive, computed, onMounted } from "vue";
export default {
setup() {
const state = reactive({
count: 1,
});
function add() {
state.count++;
}
const double = computed(() => {
return state.count * 2;
});
onMounted(() => {
console.log("mounted");
});
return { state, add, double, onMounted };
},
};
</script>
<style scoped>
</style>
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32