vue的setup

最新推荐文章于 2025-05-20 20:02:39 发布

xinguan1267

最新推荐文章于 2025-05-20 20:02:39 发布

阅读量699

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/xinguan1267/article/details/130953966

版权

文章介绍了Vue3中创建响应式数据的方法，如使用ref和reactive函数，以及如何通过watch和watchEffect来监听数据变化。ref用于创建带有value属性的对象，reactive则使整个对象变得响应式。watch用于监听特定属性的变化，而watchEffect会在任何依赖变化时自动执行。此外，还提到了toRefs和计算属性computed在处理复杂数据结构中的作用。

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

定义响应式变量

1、变量：

通过ref定义响应式数据变量

ref()响应式应用，返回带有value属性的对象，

将值封装在对象里，是为了保持JavaScript中数据类型的行为统一

通过toRefs(object)使结构化的数据重新获得响应式

通过ES6扩展运算符进行结构使的对象中的数据不是响应式...obj

2、引用变量：

通过reactive应用响应式引用数据类型

watch/watchEffect的使用

1、watch(侦听的响应式引用，回调函数)

2、watchEffect(回调函数)，不需要制定监听的属性，自动收集依赖

watch与watchEffect的区别

1 watchEffct不需要指定监听的属性，自动手机依赖，只要在回调用应用了响应式的属性 watch监听指定的属性，可以监听多个

2 watch可以获取到新旧值，watchEffet不可以

3 watchEffect在组件初始化的时候自动执行一次，用来收集依赖，watch不需要，一开始就制定了

App.vue

<script>
import Content from './components/Content.vue'
import { ref, reactive, toRefs, watch, watchEffect, computed } from 'vue'
export default {
  data() {
    return {}
  },
  components: {
    Content
  },
  setup() {
    // ref()响应式应用，返回带有value属性的对象，
    // 将值封装在对象里，是为了保持JavaScript中数据类型的行为统一
    let msg = ref('hello')

    function changeMsg() {
      msg.value = 'aaa'
      console.log(msg);
    }

    // 通过ref定义响应式数据变量
    const counter = ref(0)
    function changeCounter() {
      counter.value++
    }
    // watch(侦听的响应式引用，回调函数)
    watch(counter, (newValue, oldValue) => {
      console.log("newValue==", newValue, "oldValue==", oldValue);
    })
    // 计算属性
    const reverseMsg = computed(() => {
      return msg.value.split('').reverse().join('')
    })

    // 通过reactive应用响应式引用数据类型
    const obj = reactive({
      name: 'zhangsan',
      age: 18,
      children: {
        name: 'zhang xiao san'
      }
    })
    function changeObj() {
      obj.name = 'lisi',
        obj.age = 20
    }
    // watchEffect(回调函数)，不需要制定监听的属性，自动收集依赖
    watchEffect(() => {

      console.log("watchEffect===", obj);
    })

    // 通过toRefs(object)使结构化的数据重新获得响应式
    // 通过ES6扩展运算符进行结构使的对象中的数据不是响应式...obj
    return { msg, changeMsg, counter, changeCounter, obj, changeObj, ...toRefs(obj), reverseMsg }
  }
  /* watch与watchEffect的区别
  1 watchEffct不需要指定监听的属性，自动手机依赖，只要在回调用应用了响应式的属性
  watch监听指定的属性，可以监听多个
  2 watch可以获取到新旧值，watchEffet不可以
  3 watchEffect在组件初始化的时候自动执行一次，用来收集依赖，watch不需要，一开始就制定了 */

}
</script>
<template>
  <h2>我是app页面</h2>
  <p>{{ msg }}</p>
  <p>计算属性实现反转：{{ reverseMsg }}</p>
  <button @click="changeMsg">修改msg</button>
  <p>{{ counter }}</p>
  <button @click="changeCounter">counter++</button>
  <p>objName:{{ obj.name }}----bojAge:{{ obj.age }}</p>
  <button @click="changeObj">修改obj</button>
  <h2>{{ obj.children.name }}</h2>
  <!-- 使用扩展运算符...obj后可以书写的格式 -->
  <p>objName:{{ name }}----bojAge:{{ age }}</p>
  <button @click="changeObj">修改obj</button>
  <h2>{{ children.name }}</h2>
  <Content />
</template>

setup参数

接收两个参数props，contents