Vue进阶（幺叁零）：Vue3新特性
升级 Vue 3.0 项目
目前创建 Vue 3.0 项目需要通过插件升级的方式来实现，
vue-cli 暂时还未直接支持创建Vue3.0项目，首先我们进入项目目录，并输入以下指令：
cd vue-next-test
vue add vue-next
- 1
- 2
setup
setup() 函数是 vue3 中专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一的入口。
setup 函数会在 beforeCreate 之后、created 之前执
1.setup是一个新的组件选项，也是其他API的入口。也就是说，你所有的操作都将在setup函数内部定义和执行， Vue3.0也将用函数代替Vue2.x的类也就是new Vue()
2.setup 第一个参数是props,这里的props和Vue2.x中的props一致。
3.何时调用？setup是在一个组件实例被创建时，初始化了 props 之后调用，其实就是取代了Vue2.x的careted和beforeCreate。
4.setup返回一个对象，对象中的属性将直接暴露给模板渲染的上下文。而在Vue2.x中，你定义的属性都会被Vue内部无条件暴露给模板渲染上下文。
- 1
- 2
- 3
- 4
接收prop
props: { p1: String,
},
setup(props, context) { console.log(props.p1); },
- 1
- 2
- 3
- 4
- 5
- 6
- 7
context
setup 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 vue 2.x 中需要通过 this 才能访问到，在 vue 3.x 中，它们的访问方式如下：
const MyComponent = {
setup(props, context) { context.attrs context.slots context.parent context.root context.emit context.refs }
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
computed
计算值的行为跟计算属性 (computed property) 一样：只有当依赖变化的时候它才会被重新计算。类型某act的useCallback useMemo。
computed() 返回的是一个包装对象，它可以和普通的包装对象一样在 setup() 中被返回 ，也一样会在渲染上下文中被自动展开。
用法一：
setup() { const num = ref(0); const get_num = computed(() => num.value + "计算属性"); return { num, get_num, };
},
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
用法二：
// 创建一个 ref 响应式数据
const count = ref(1)
// 创建一个 computed 计算属性
const plusOne = computed({
// 取值函数
get: () => count.value + 1,
// 赋值函数
set: val => { count.value = val - 1
}
})
// 为计算属性赋值的操作，会触发 set 函数
plusOne.value = 9
// 触发 set 函数后，count 的值会被更新
console.log(count.value) // 输出 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
计算属性与数据监听
import { ref, computed, watch, watchEffect } from "vue";
export default { setup() { const count = ref(0); const doubleCount = computed(() => { return count.value * 5; }); watch( () => count.value, (val, oldVal) => { console.log(`count is ${val}`); }, { //是否深度监听 deep: true, //是否先执行一次 immediate: true } ); function add() { count.value++; } return { count, add, doubleCount }; }
};
- 1
- 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
计算属性 computed 是一个方法，里面需要包含一个回调函数，当我们访问计算属性返回结果时，会自动获取回调函数的值。
监听器 watch 同样是一个方法，它包含 3个参数，前两个参数都是 function，第三个参数则是是否深度监听等。
第一个参数是监听的值，count.value 表示当 count.value 发生变化就会触发监听器的回调函数，即第二个参数，第二个参数可以执行监听时候的回调。
如果是2 个以上的监听属性，
watch( [() => count.value, () => name.value], //接收两个参数，第一个是新值在数组中，第二个是旧值也是在数组中 ([count, name], [oldCount, oldName]) => { console.log(count, name); console.log(oldCount, oldName); if (count != oldCount) { console.log("count发声变化"); } if (name != oldName) { console.log("name发声变化"); } } );
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
获取路由
//获取当前组件实例 const vue = getCurrentInstance(); //获取当前上下文 const { ctx } = getCurrentInstance(); //获取路由信息 console.log(ctx.$router); function changeRouter() { //路由跳转 ctx.$router.push("/about"); }
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
生命周期
2.x生命周期选项和Composition API之间的映射
-
beforeCreate ->使用 setup()
-
created ->使用 setup()
-
beforeMount -> onBeforeMount
-
mounted -> onMounted
-
beforeUpdate -> onBeforeUpdate
-
updated -> onUpdated
-
beforeDestroy -> onBeforeUnmount
-
destroyed -> onUnmounted
-
errorCaptured -> onErrorCaptured
Vuex简单使用
import Vuex from 'vuex'
export default Vuex.createStore({
state: { num: 1,
},
mutations: { add(state, value) { console.log(value) state.num++ }, decrement(state, value) { console.log(value) state.num-- }
},
actions: {
},
modules: {
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
挂载到Vue中
import router from './router'
import store from './store'
createApp(App).use(router).use(store).mount('#app')
- 1
- 2
- 3
- 4
组件使用：
<template> <div class="home"> <h1>VUEX使用</h1> <div>原始值：{{num}}</div> <div> <button @click="add">增加</button> <button @click="decrement">减少</button> </div> </div>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default { setup() { const store = useStore(); const num = computed(() => store.state.num); function add() { store.commit("add", "增加"); store.dispatch('action', payload) } function decrement() { store.commit("decrement", "减少 "); } return { num, add, decrement }; }
};
</script>
- 1
- 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
- 33
文章来源: shq5785.blog.csdn.net，作者：No Silver Bullet，版权归原作者所有，如需转载，请联系作者。
原文链接：shq5785.blog.csdn.net/article/details/106759874
- 点赞
- 收藏
- 关注作者
评论（0）