vue3.0

最新推荐文章于 2023-03-20 16:07:07 发布

weixin_47994789

最新推荐文章于 2023-03-20 16:07:07 发布

阅读量62

点赞数

本文链接：https://blog.csdn.net/weixin_47994789/article/details/116424934

版权

vue3.0

1. ref 和 reactive 的区别 ：
	ref函数注意点：ref函数只能监听简单函数类型得变化，不能监听复杂类型得变化（对象/数组）
    如果想要监听复杂类型数据得时候就需要用到 reactive来进行监听

vue3.0中watch 基本用法（ref）

	<body>
    <div id="app">
        <input v-model="firstName">
        <input v-model="lastName">
        <div>{{fullName}}</div>
    </div>
</body>
<script>
    const { createApp, ref, reactive, watch } = Vue

    const firstName = ref('')
    const lastName = ref('')
    let fullName = ref('')

    const app = {
        setup() {
            // watch监听变量的变化
            // 第一个参数: 要监听的响应式对象
            // 第二个参数: 回调函数
            watch(firstName,(newVal, oldVal)=>{
                fullName.value = firstName.value + lastName.value
                console.log(fullName.value)
            })
            watch(lastName,(newVal, oldVal)=>{
                fullName.value = firstName.value + lastName.value
                console.log(fullName.value)
            })
            return {
                firstName,
                lastName,
                fullName
            }
        }
    }
    createApp(app).mount('#app')
</script>

2.vue3,0 中watch的高级用法（监听reactive对象）：

	setup(){
		// reactive的包装是深层次的里面的属性也包装成了响应式对象
			let inpVal = reactive({
	     		 bottom_inp:'  ' ,    // 可以是你inp中的输入值
	    	})
	    
	    	watch(()=>inpVal.bottom_inp,(oldNode,nowNode)=>{
		      console.log(oldNode,nowNode)
		    })
	}

watch 监听类似小程序中的observers，钩子函数，
作用：当某一个变量发生变化的时候，我们可以再在狗子函数中写一些业务逻辑，做一些事情

vue3 中基本有大部分的周期，去掉了beforeCreated和created,不过我们可以在setup 中直接写一些代码，这些代码就相当于是在created中执行的，

weixin_47994789

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue3.0

vue3.01. ref 和 reactive 的区别： ref函数注意点：ref函数只能监听简单函数类型得变化，不能监听复杂类型得变化（对象/数组）如果想要监听复杂类型数据得时候就需要用到 reactive来进行监听vue3.0中watch 基本用法（ref） <body> <div id="app"> <input v-model="firstName"> <input v-model="lastN
复制链接

扫一扫