首页 > 其他分享 >第五篇 vue - 基础 - 响应式基础

第五篇 vue - 基础 - 响应式基础

时间:2023-03-28 22:25:51浏览次数:46  
标签:count vue methods 基础 响应 实例 第五篇 组件 export

声明响应式状态

选用选项式 API 时,会用 data 选项来声明组件的响应式状态。此选项的值应为返回一个对象的函数

Vue 将在创建新组件实例的时候调用此函数,并将函数返回的对象用响应式系统进行包装。此对象的所有顶层属性都会被代理到组件实例 (即方法和生命周期钩子中的 this) 上

export default {
  data() {
    return {
      count: 1
    }
  },

  // `mounted` 是生命周期钩子,之后我们会讲到
  mounted() {
    // `this` 指向当前组件实例
    console.log(this.count) // => 1

    // 数据属性也可以被更改
    this.count = 2
  }
}

1、这些实例上的属性仅在实例首次创建时被添加,因此你需要确保它们都出现在 data 函数返回的对象上。若所需的值还未准备好,在必要时也可以使用 null、undefined 或者其他一些值占位。

2、虽然也可以不在 data 上定义,直接向组件实例添加新属性,但这个属性将无法触发响应式更新

3、Vue 在组件实例上暴露的内置 API 使用 $ 作为前缀。它同时也为内部属性保留 _ 前缀。因此,你应该避免在顶层 data 上使用任何以这些字符作前缀的属性

响应式代理 vs. 原始值

在 Vue 3 中,数据是基于 JavaScript Proxy(代理) 实现响应式的。使用过 Vue 2 的用户可能需要注意下面这样的边界情况

export default {
  data() {
    return {
      someObject: {}
    }
  },
  mounted() {
    const newObject = {}
    this.someObject = newObject

    console.log(newObject === this.someObject) // false
  }
}

1、当你在赋值后再访问 this.someObject,此值已经是原来的 newObject 的一个响应式代理

2、与 Vue 2 不同的是,这里原始的 newObject 不会变为响应式:请确保始终通过 this 来访问响应式状态

声明方法

要为组件添加方法,我们需要用到 methods 选项。它应该是一个包含所有方法的对象

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    // 在其他方法或是生命周期中也可以调用方法
    this.increment()
  }
}

1、Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this

2、这确保了方法在作为事件监听器或回调函数时始终保持正确的 this

3、你不应该在定义 methods 时使用箭头函数,因为箭头函数没有自己的 this 上下文

export default {
  methods: {
    increment: () => {
      // 反例:无法访问此处的 `this`!
    }
  }
}

和组件实例上的其他属性一样,方法也可以在模板上被访问。在模板中它们常常被用作事件监听器:

<button @click="increment">{{ count }}</button>

在上面的例子中,increment 方法会在 <button> 被点击时调用

DOM 更新时机

当你更改响应式状态后,DOM 会自动更新

你得注意 DOM 的更新并不是同步的。相反,Vue 将缓冲它们直到更新周期的 “下个时机” 以确保无论你进行了多少次状态更改,每个组件都只更新一次

若要等待一个状态改变后的 DOM 更新完成,你可以使用 nextTick() 这个全局 API

import { nextTick } from 'vue'

export default {
  methods: {
    increment() {
      this.count++
      nextTick(() => {
        // 访问更新后的 DOM
      })
    }
  }
}

深层响应性

在 Vue 中,状态都是默认深层响应式的。这意味着即使在更改深层次的对象或数组,你的改动也能被检测到

export default {
  data() {
    return {
      obj: {
        nested: { count: 0 },
        arr: ['foo', 'bar']
      }
    }
  },
  methods: {
    mutateDeeply() {
      // 以下都会按照期望工作
      this.obj.nested.count++
      this.obj.arr.push('baz')
    }
  }
}

你也可以直接创建一个浅层响应式对象。它们仅在顶层具有响应性,一般仅在某些特殊场景中需要

有状态方法

在某些情况下,我们可能需要动态地创建一个方法函数,比如创建一个预置防抖的事件处理器

import { debounce } from 'lodash-es'

export default {
  methods: {
    // 使用 Lodash 的防抖函数
    click: debounce(function () {
      // ... 对点击的响应 ...
    }, 500)
  }
}

注意

不过这种方法对于被重用的组件来说是有问题的,因为这个预置防抖的函数是 有状态的:它在运行时维护着一个内部状态。如果多个组件实例都共享这同一个预置防抖的函数,那么它们之间将会互相影响

要保持每个组件实例的防抖函数都彼此独立,我们可以改为在 created 生命周期钩子中创建这个预置防抖的函数:

export default {
  created() {
    // 每个实例都有了自己的预置防抖的处理函数
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 最好是在组件卸载时
    // 清除掉防抖计时器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 对点击的响应 ...
    }
  }
}

标签:count,vue,methods,基础,响应,实例,第五篇,组件,export
From: https://www.cnblogs.com/caix-1987/p/17266987.html

相关文章

  • 第七篇 vue - 基础 - 类与样式绑定
    Class与Style绑定数据绑定的一个常见需求场景是操纵元素的CSSclass列表和内联样式。因为class和style都是attribute,我们可以和其他attribute一样使用v-bind......
  • linux基础01
    Linux基础复习前期必备知识1.命令提示符 [root@WYJ001~]#root表示用户名信息@分隔符WYJ001为主机名称~表示所处目录位置......
  • Vue——initProvide【十一】
    前言前面我们简单的了解了vue初始化时的一些大概的流程,这里我们详细的了解下具体的内容;内容这一块主要围绕init.ts中的initProvide进行剖析,初始化生命周期之后紧接着......
  • vue 软键盘组件封装
    场景和需求1软键盘固定2多输入框共用一个组件,聚焦切换时操作对象自动切换3根据光标在输入框的位置进行相应的输入和删除操作4点击软键盘时保存输入框光标活跃5输......
  • 【电脑操作技巧】重装系统之后的常用数据恢复方式和基础环境搭建
    这段时间我经历了人生中第一次(被迫)重装系统,有些数据的恢复花了好久才探索出来,因此,我想总结一下这几天的痛苦经历,重装系统或者购入新机的朋友可以看看。目录0.桌面恢复1.......
  • 记录--vue刷新当前页面
    这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助背景项目当中如果做新增/修改/删除等等操作通常情况下都需要刷新数据或者刷新当前页面.思路(1)如果......
  • vue-cookies用法
    importCookiesfrom'vue-cookies';constcookies={};cookies.set=function(name='default',value='',cookieSetting=60*60*24*365){Co......
  • 26:SwiftUI:基础知识
    1:SwiftUI的运行速度优于UIKit,他减少了界面的层次结构,因此可以减少绘制步骤,并且他完全绕过了CoreAnimation,直接进入Metal,可以有优秀的渲染性能。2:SwiftUI就是⼀种声明式的......
  • 100道python基础题——(21)
    机器人从原点(0,0)开始在平面中移动。机器人可以通过给定的步骤向上,向下,向左和向右移动。机器人运动的痕迹如下所示:UP5DOWN3LETF3RIGHT2方向之后的数字是步骤。请编写......
  • 缺失值处理基础语法
    1、Imputerfromsklearn.preprocessingimportImputerfromsklearn.model_selectionimporttrain_test_splitimportpandasaspdfileName='***/abc.xlsx'df=pd......