watch
- 与vue2.x的watch功能一样,只是写法上存在差异
- watch(source,callback,option)
- source:要监听的数据
- callback:监听数据之后的回调函数
- watch相关的配置项
- 使用方法
import { watch,ref,reactive } from "vue"
......
setup(){
const number = ref('1');
const n = reactive({num:10,age:'24'})
// 监听ref
watch(
number,
(newVAl,oldVal)=>{
......
},
{
immediate:true,
}
)
// 监听reactive
watch(
()=>n.num,
(newVal,oldVal)=>{
......
}
)
// 监听多值
watch(
[()=>n.num,()=>n.age],
([numNewVal,numOldValue],[ageNewVal,ageOldVal])=>{
......
// callback
}
)
}
computed
- 与vue2.x的conputed功能一样,只是写法上存在差异
- 使用方法
import { ref,computed } from "vue"
......
setup(){
const firstName = ref('L');
const lastName = ref('E');
// 不含set的写法
const fullName = computed(()=>firstName.value + lastName.value);
//set的写法
let fullName = computed({
get(){
return firstName.value + lastName.value;
},
set(val){
firstName.value = val;
}
})
// 调用fullName的set 方法
const changeFullName = () => {
fullname.value = 'XXX'
}
return {
fullName
}
}
获取页面元素的实例
- 使用方法
<div ref="myDiv"></div>
<script>
import { ref,onMounted } from "vue";
......
setup(){
const myDiv = ref(null); // 名字需要与页面的ref相同
onMounted(()=>{
// 需要在mounted获取
console.log(myDiv.value)
})
return {
myDiv // 必须要return出去
}
}
</script>
nextTick
-
与vue2.x的nextTick功能一样,只是写法上存在差异
-
使用方法
import { nextTick } from "vue"
......
setup(){
nextTick(()=>{
console.log('nextTick')
})
}
methods
- 使用方法
<div @click="handleClick('div')"></div>
......
setup(){
const handleClick = val =>{
console.log(val) // 'div'
}
return{
handleClick
}
}