全家桶实战 升级@vue/cli npm update -g @vue/cli
vue -V ➜ frontend-basic git:(master) ✗ vue -V @vue/cli 4.3.1
创建项目 vue create vue3demo vue add vue-next // 添加vue3插件升级为vue3
创建Vue实例 // Vue3.0 createApp(App).use(router).use(store).mount(‘#app’)
// Vue2.0 new Vue({ router, store, render: h => h(App) }).$mount(‘#app’)
响应式数据 // Vue2 export default { // …. data() { return { state: { count: 0 } }; }, }
// Vue3 export default { // …. setup(){ const state = reactive({ count:0 }) return {state} } }
自定义事件: // Vue2 export default { // …. methods: { add() { this.state.count++; } }, }
// Vue3 export default { // …. setup(){ const add = () => { state.count++ } return {add} } }
计算属性 // Vue2 export default { // … computed: { double() { return this.state.count * 2; } }, } // Vue3 export default { // … setup(){ const double = computed (() => state.count * 2 ) return {double} } }
监听器 // Vue2 export default { // … watch: { count: value => { console.log(“count is changed:”, value); } } } // Vue3 export default { // … setup(){ watch( () => state.count, value => { console.log(‘state change :’,value) } ) } }
生命周期函数及dom元素获取 // Vue2 export default { // … mounted() { this.$refs.dom.style.color = “red”; } } // Vue3 export default { // … setup(){ // ref 创建一个响应式的数据对象 const root = ref(null) onMounted(() => { // 关联节点 console.log(‘dom’,root) const dom = root.value dom.style.color = ‘red’ }) } }
创建路由 // Vue2 const router = new VueRouter({ mode: ‘history’, base: process.env.BASE_URL, routes: [ // 路由配置不变 ] })
// Vue3 const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes: [ // 路由配置不变 ] })
使用路由 // Vue2 export default { name: “Home”, methods: { goHome() { this.$router.push(‘Home’) } } };
// Vue3 export default { setup() { const router = useRouter() const goHome = () => router.push(‘Home’) return { goHome}; } };
vuex // Vue2 export default new Vuex.Store({ state: { count:1 }, mutations: { inc(state){ state.count ++ } }, actions: { }, modules: { } })
// Vue3 export default Vuex.createStore({ state: { count:1 }, mutations: { add(state){ state.count ++ } }, actions: { }, modules: { } });
使用vuex // Vue2 export default { name: “Home”, data() { return { state: this.$store.state }; }, computed: { double() { return this.$store.state.count * 2; }, }, methods: { add() { this.$store.commit(“add”); } } }; // Vue3 import { computed, reactive } from “vue”; import { useStore } from “vuex”; export default { setup() { const store = useStore() const state = store.state const double = computed(() => store.state.count * 2)
const add = () => {
store.commit("add");
};
return { state, add ,double}; } };
复合API(CompositionAPI)
// 尤大神的经典例子 鼠标位置侦听逻辑 function useMouse() { const state = reactive({ x: 0, y: 0 }) const update = e => { state.x = e.pageX state.y = e.pageY } onMounted(() => { window.addEventListener(‘mousemove’, update) }) onUnmounted(() => { window.removeEventListener(‘mousemove’, update) }) return toRefs(state) }
function useCounter() { const state = reactive({ num: 1 }) onMounted(() => { setInterval(() => { state.num++ }, 1000) }) return toRefs(state) }
const MyComponent = {
template: <div>x: y: num: </div>,
setup() {
return {
…useMouse(),
…useCounter()
}
}
}
vue3基础API总结 const { createApp, reactive, // 创建响应式数据对象 ref, // 创建一个响应式的数据对象 toRefs, // 将响应式数据对象转换为单一响应式对象 isRef, // 判断某值是否是引用类型 computed, // 创建计算属性 watch, // 创建watch监听 // 生命周期钩子 onMounted, onUpdated, onUnmounted, } = Vue
setup setup(props,context){ console.log(‘setup….’,) console.log(‘props’,props) // 组件参数 console.log(‘context’,context) // 上下文对象 }
reactive const state = reactive({ count: 0, plusOne: computed(() => state.count + 1) })
ref 与 isRef // 定义创建响应式数据 const time = ref(new Date()) // 设置定时器为了测试数据响应 setInterval(() => time.value = new Date(), 1000)
// 判断某值是否是响应式类型
console.log('time is ref:', isRef(time))
console.log('time', time)
console.log('time.value', time.value)
// 我们看看模板里面我们这样展示
template: `
<div>
<div>Date is </div>
</div>
`
torefs // 如果不用toRefs const state = reactive({ count: 0, plusOne: computed(() => state.count + 1) }) return { state } // 模板渲染要这样写 template: ` <div> <div>count is </div> <div>plusOne is </div> </div> `
// 我们再看看用了toRefs
const state = reactive({
count: 0,
plusOne: computed(() => state.count + 1)
})
return {
...toRefs(state)
}
// 模板渲染要这样写
template: `
<div>
<div>count is 8 </div>
<div>plusOne is </div>
</div>
`
watch
watch(() => state.count * 2, val => {
console.log(count * 2 is ${val})
})
effect 副作用函数
// 副作用函数 effect(() => { console.log(‘数值被修改了..’,state.count) })
v-show=”!loading” :isLoading=”loading”
