Vue3
1.启动方式不同
- vue2启动代码如下
//vue2
new Vue({
store,
router,
render:h=>h(app)
}).$mount(#app)
- vue3启动代码如下
//vue3
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
var app = createApp(App)
app.use(store).use(router).mount('#app')
2.全局方法定义不同
- vue2代码如下:
//vue2
Vue.protoype.$http = axios
- vue3代码如下:
//vue3
var app = createApp(App)
app.config.globalProperties.$http = axios
3.template根组件的不同
- vue2有且只有一个根组件
- vue3随意
4.生命周期钩子函数不同
- vue2生命周期钩子函数代码如下
//创建前后
beforecreate(),created()
//挂载前后
beforemount(),mounted()
//更新前后
beforeupdate(),updated()
//销毁前后
beforedestory(),destroyed()
- vue3生命周期钩子函数代码如下
setup() : //开始创建组件之前,在 beforeCreate 和 created 之前执行,创建的是 data 和 method
onBeforeMount() : //组件挂载到节点上之前执行的函数;
onMounted() : //组件挂载完成后执行的函数;
onBeforeUpdate(): //组件更新之前执行的函数;
onUpdated(): //组件更新完成之后执行的函数;
onBeforeUnmount(): //组件卸载之前执行的函数;
onUnmounted(): //组件卸载完成后执行的函数;
onActivated(): //被包含在 <keep-alive> 中的组件,会多出两个生命周期钩子函数,被激活时执行;
onDeactivated(): //比如从 A 组件,切换到 B 组件,A 组件消失时执行;
onErrorCaptured(): //当捕获一个来自子孙组件的异常时激活钩子函数。
5、setup组合式api的使用
1.小示例
小实例代码如下:
<template>
<div>
<div>
<button @click="num++">{{num}}</button>
<button @click="setnum">改为5</button>
<div v-for="(item,index) in list" :key="item">{{item}}
<button @click="list.splice(index,1)">×</button>
</div>
<p>{{twiceNum}}</p>
<p ref="myp">我爱我的祖国</p>
</div>
</div>
</template>
<script>
// 导入一个响应式应用ref
import {ref,reactive,watch,watchEffect,computed,onMounted} from 'vue'
export default {
setup() {
const num = ref(5);
const list = reactive(['vue','js','html'])
// 定义一个修改num的方法
function setnum(){
num.value = 5
}
watch(num,function(nval,oval){
console.log("num由",oval,"变化为",nval)
})
watchEffect(() => {
})
var twiceNum = computed(()=>num.value*2)
var myp = ref(null)
onMounted(()=>{
console.log("组件已经挂载完毕")
myp.value.addEventListener("click",()=>alert(myp.value.innerText))
})
// 返回对象num
return {num,list,setnum,twiceNum,myp}
}
}
</script>
<style>
/* vue2代码和vue3基本相同 */
</style>
2.一个获取窗口宽高的方法
// html代码
<template>
<div>
<h1>自定义api组合zpi</h1>
<p>{{winsize}}</p>
</div>
</template>
<script>
import useWinSize from '@/utils/useWinSize'
export default{
setup() {
const winsize = useWinSize()
return {winsize}
}
}
</script>
// js代码(src目录新建js)
import {reactive,onMounted,onBeforeUnmount} from 'vue'
// 定义一个获取窗口宽高的方法,
function useWinSize(){
var size = reactive({
w:window.innerWidth,
h:window.innerHeight,
})
onMounted(()=>{
window.addEventListener("resize",changeHd)
})
onBeforeUnmount(()=>{
window.removeEventListener("resize",changeHd)
})
function changeHd(){
size.w = window.innerWidth;
size.h = window.innerHeight;
}
// 返回一个固定值
return size
}
// 导出
export default useWinSize