首页 > 其他分享 >vuejs从入门到精通——watch侦听器——侦听数据源类型

vuejs从入门到精通——watch侦听器——侦听数据源类型

时间:2023-02-04 21:24:32浏览次数:40  
标签:count console log vuejs 数据源 watch ref

watch侦听器——侦听数据源类型

https://cn.vuejs.org/guide/essentials/watchers.html#basic-example

watch的第一个参数可以是不同形式的“数据源”:它可以是一个 ref (包括计算属性)、一个响应式对象、一个 getter 函数、或多个数据源组成的数组:

js:
const x = ref(0)
const y = ref(0)

// 单个 ref
watch(x, (newX) => {
  console.log(`x is ${newX}`)
})

// getter 函数
watch(
  () => x.value + y.value,
  (sum) => {
    console.log(`sum of x + y is: ${sum}`)
  }
)

// 多个来源组成的数组
watch([x, () => y.value], ([newX, newY]) => {
  console.log(`x is ${newX} and y is ${newY}`)
})

注意,你不能直接侦听响应式对象的属性值,例如:

js:
const obj = reactive({ count: 0 })

// 错误,因为 watch() 得到的参数是一个 number
watch(obj.count, (count) => {
  console.log(`count is: ${count}`)
})

这里需要用一个返回该属性的 getter 函数:

js:

// 提供一个 getter 函数
watch(
  () => obj.count,
  (count) => {
    console.log(`count is: ${count}`)
  }
)

标签:count,console,log,vuejs,数据源,watch,ref
From: https://www.cnblogs.com/zuoyang/p/17092411.html

相关文章

  • vuejs从入门到精通——watch侦听器
    watch侦听器https://cn.vuejs.org/guide/essentials/watchers.html虽然计算属性在大多数情况下更适合,但有时也需要一个自定义的侦听器。 这就是为什么vue通过watch......
  • vuejs从入门到精通——计算属性缓存 vs 方法
    计算属性缓存vs方法https://cn.vuejs.org/guide/essentials/computed.html#basic-exampletemplate:<p>{{calculateBooksMessage()}}</p>js://组件中fun......
  • vuejs从入门到精通——可写计算属性
    可写计算属性https://cn.vuejs.org/guide/essentials/computed.html#basic-example 计算属性默认是只读的。当你尝试修改一个计算属性时,你会收到一个运行时警告。只在......
  • vuejs从入门到精通——计算属性
    计算属性https://cn.vuejs.org/guide/essentials/computed.html模板中的表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。......
  • vuejs从入门到精通——单文件组件(SFC)
    单文件组件(SFC)https://cn.vuejs.org/guide/scaling-up/sfc.html一、单文件组件(SFC)是什么?Vue的单文件组件(即*.vue文件,英文Single-FileComponent,简称SFC)是一种......
  • vuejs从入门到精通——应用配置
    应用配置https://cn.vuejs.org/guide/essentials/application.html#mounting-the-app应用实例会暴露一个.config对象允许我们配置一些应用级的选项。例如定义一个应用级......
  • vuejs从入门到精通——多个应用实例
    多个应用实例https://cn.vuejs.org/guide/essentials/application.html#multiple-application-instances应用实例并不只限于一个。createAppAPI允许你在同一个页面中创......
  • vuejs从入门到精通——根组件
    根组件https://cn.vuejs.org/guide/essentials/application.html#the-root-component一、先创建一个vue实例每个Vue应用都是通过createApp函数创建一个新的应用实例:......
  • vuejs从入门到精通——DOM 中的根组件模板
    DOM中的根组件模板https://cn.vuejs.org/guide/essentials/application.html#the-root-component当在未采用构建流程的情况下使用Vue时,我们可以在挂载容器中直接书写......
  • vuejs从入门到精通——Visual Studio Code 使用 vite 安装项目
    VisualStudioCode 使用vite安装项目Vite是一个轻量级的、速度极快的构建工具,对VueSFC提供第一优先级支持。作者是尤雨溪,同时也是Vue的作者。要使用vite来创......