欢迎大家加入一起共同学习进步。
最新消息和优秀文章我会第一时间推送的。
视频讲解 b站视频 www.bilibili.com/video/BV1fa…
关于发布时间
具体时间可以看大家可以看看官方时间表。 官方时间表
目前在Vue3处于Beta版本,后面主要是处理稳定性问题。也就是说主要Api不会有很多改进。尤大神从直播中说虽然很多想法,但是大的变化最快也会出现在3.1上面了。所以目前的版本应该应该和正式版差异很小了。 看来Q2能发布的可能性极大。
脑图
>>>>>>>️脑图链接<<<<<<<升级@vue/cli
为了让cli支持vue3需要将vue-cli升级到4.3.1以上
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使用API一律是函数式风格所以和new告别了。
// Vue3.0
createApp(App).use(router).use(store).mount('#app')
// Vue2.0
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
响应式数据
模板定制
没有变化
<template>
<div class="hello" style="border:1px solid">
<h1 ref="root">{{ msg }}</h1>
{{state.count}} double is {{double}}
<button @click="add">+</button>
</div>
</template>
声明响应式数据
// 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 | Vue3 |
---|---|
beforeCreate | setup(替代) |
created | setup(替代) |
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
errorCaptured | onErrorCaptured |
路由Vue-router
创建路由
// 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
创建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};
}
};