ref和reactive的使用

ref

  • ref能够创建基本类型的响应式数据，同时ref还能够创建对象类型的响应式数据

  • 获取ref创建的响应式数据需要使用.value进行获取：name.value

    ref_basic.png
    ref_case.png

reactive

  • reactive能够创建对象类型的响应式数据,不能够创建基本类型的响应式数据
  • 获取reactive创建的响应式数据不需要使用.value直接能够获取
    reactive_basic.png

ref和reactive的区别

  • ref创建的变量必须使用.value(可以使用volar 插件自动添加.value)。
  • reactive重新分配一个新对象，会失去响应式(可以使用Object.assign去整体替换)。
    • 如示例，想要更改上述reactive中定义的car需要使用Object.assign
      reactive_case.png

使用原则

  • 若需要一个基本类型的响应式数据，必须使用ref。
  • 若需要一个响应式对象，层级不深，ref、reactive都可以。
  • 若需要一个响应式对象，且层级较深或者表单提交数据，推荐使用reactive。

computed计算属性

computed计算属性的两种使用形式

  • 这么定义的fullName是一个计算属性，且是只读的

    1
    2
    3
    4
    5
    let firstName = ref('zhang')
    let lastName = ref('san')
    let fullName = computed(()=>{
    return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + '-' + lastName.value
    })

  • 这么定义的fullName是一个计算属性，可读可写(下方代码中当点击changeFullName方法时，会将fullName进行赋值，通过computed中的set(val)将值进行重新赋予给最开始定义的数据中)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    let fullName = computed({
    get(){
    return firstName.value.slice(e,1).toUppercase() + firstName.value.slice(1) + '-' + lastName.value
    },
    set(val){
    const [str1,str2] = val.split('-')
    firstName.value = str1
    lastName.value = str2
    }
    function changeFullName(){
    fullName.value = 'li-si'
    }

watch属性

watch能监视4中情况

  • 作用：监视数据的变化（和Vue2中的watch作用一致）
  • 特点：Vue3中的watch只能监视以下四种数据：
    1、ref定义的数据。
    2、reactive定义的数据。
    3、函数返回一个值。
    4、一个包含上述内容的数组。

*情况一

  • 监视ref定义的【基本类型】数据：直接些数据名即可，监视的是其value值的改变。
    watch_ref.png

*情况二

  • 监视ref定义的【对象类型】数据:直接写数据名，监视的是对象的【地址值]，若想监视对象内部的数据，要手动开启深度监视。
  • 注意：
    1、若修改的是ref定义的对象中的属性，newalue和oldValue都是新值，因为它们是同一个对象。
    2、若修改整个ref定义的对象，newValue 是新值，oldValue 是旧值，因为不是同一个对象了。
    watch_ref2.png

*情况三

  • 监视reactive定义的【对象类型】数据，且默认开启了深度监视。
    watch_reactive.png

*情况四

  • 监视ref或reactive定义的【对象类型】数据中的某个属性注意点如下：
    • 1、若该属性值不是【对象类型】，需要写成函数形式。
    • 2、若该属性值是依然是【对象类型】，可直接编写，也可写成函数，建议写成函数。
  • 结论：监视的要是对象里的属性，那么最好写函数式，注意点：若是对象监视的是地址值，需要关注对象内部，需要手动开启深度监视。
    watch_ref_reactive.png

watchEffect属性

  • 立即运行一个函数，同时响应式地追踪其依赖，并在依赖更改时重新执行该函数。
  • watch对比watchEffect
    • 都能监听响应式数据的变化，不同的是监听数据变化的方式不同
    • watch要明确指出监视的数据
    • watchEffect不用明确指出监视的数据(函数中用到哪些属性，那就监视哪些属性)
      watchEffect.png

标签的ref属性

  • 作用：用于注册模板引用。
    • 用于普通DOM标签上，获取的是DOM节点。
    • 用于组件标签上，获取的是组件实力对象。
      label_ref.png

引入ts并使用

  • 可以是定义一个接口类型、或泛类型的具体属性
    ts.png

Props

  • 一个组件需要显式声明它所接受的 props，这样 Vue 才能知道外部传入的哪些是 props。
    props.png