【Vue3】之setup使用watch,ref

原创已于 2022-07-28 11:02:14 修改 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #vue.js #javascript

于 2021-06-17 13:58:45 首次发布

前端同时被 2 个专栏收录

34 篇文章

订阅专栏

14 篇文章

订阅专栏

本文介绍了一个基于Vue框架的简单示例，展示了如何使用Vue的响应式特性来监听数据变化，并通过模板语法实时更新视图。具体实现了按钮点击事件改变数据并观察其变化的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一个setup()只注重一段业务逻辑

<template>
	<div>{{name}}</div>
	<button @click="setName">设置名字</button>
</template>
import {ref,watch} from 'vue'
export default {
	name: "index",
	setup(){
		//创建一个响应式且可变的 ref 对象
		let name = ref('')
		// 监听变化
        watch(() => name.value,(val) => {
            console.log("name发生了变化",val)
        })
        function setName () {
            name.value = "我是张三"
        }
        return { name, setName  }
	}
}