举例说明:
实现监听鼠标移动坐标
vue2.0写法
<template>
<div>
<div>
x:{{x}} <br>
y:{{y}}
</div>
</div>
</template>
<script>
export default {
name: "index",
data() {
return {
x:0,
y:0
};
},
created() {
window.addEventListener("mousemove",this.update)
},
mounted() {},
methods: {
update(e){
thisx=e.pageX;
thisy=e.pageY;
}
}
};
</script>
<style scoped lang="scss">
</style>
vue3.0写法
<template>
<div>
<div>
x:{{x}} <br>
y:{{y}}
</div>
</div>
</template>
<script>
import {ref,computed,watch,onMounted,onUnmounted} from "vue"
function userMousePosition(){
const x = ref(0)
const y = ref(0)
function update(e) {
x.value=e.pageX;
y.value=e.pageY;
}
onMounted(()=>{
window.addEventListener("mousemove",update)
})
}
export default {
setup(){
const {x,y} =userMousePosition()
return {x,y}
}
};
</script>
<style scoped lang="scss">
</style>
vue 3.0新增:
ref reactive onMounted onUnmounted setup toRefs watchEffect
取代 data 和created声明周期函数
computed和watch按需引入
修改ref值在value里修改 例x.value
watch监听区别监听size变量值
父子传值
vuex新增
使用
vue-router新增