vue ref属性_学习vue3系列ref

基于vite初始化项目

npm init vite-app cd npm installnpm run dev

项目生成之后，编写一个计数器组件，修改App.vue里面的内容：

<template>  <button @click="change">count is: {{ count }}button>template><script>export default {  setup () {    let count = 0    const change = () => count++    return { count, change }  }}script>

现在要介绍的第一个API就是setup函数。setup 函数是一个新的组件选项。作为在组件内使用 Composition API 的入口点。

1、调用时机

创建组件实例，然后初始化 props ，紧接着就调用setup 函数。从生命周期钩子的视角来看，它会在 beforeCreate 钩子之前被调用。

2、模板中使用

如果 setup 返回一个对象，则对象的属性将会被合并到组件模板的渲染上下文。

3、渲染函数 / JSX 中使用

setup 也可以返回一个函数，函数中也能使用当前 setup 函数作用域中的响应式数据：

import { h, ref, reactive } from 'vue'export default {  setup() {    const count = ref(0)    const object = reactive({ foo: 'bar' })    return () => h('div', [count.value, object.foo])  }}

4、参数 该函数接收 props 作为其第一个参数，注意 props 对象是响应式的，第二个参数提供了一个上下文对象，从原来 2.x 中 this 选择性地暴露了一些 property。

const MyComponent = {  setup(props, context) {    context.attrs    context.slots    context.emit  },}

在 App.vue 中，点击事件绑定了 change，然后修改了 count，但是页面并没有发生改变，这是因为 setup 函数返回的对象中 count 不是响应式数据，那么如何创建响应式数据呢？此时就要掌握响应式系统 API，我们可以使用 ref 创建。

<template>  <button @click="change">count is: {{ count }}button>template><script>import { ref } from 'vue'export default {  setup () {    let count = ref(0) // { value: 0 }    const change = () => count.value++    return { count, change }  }}script>

接受一个参数值并返回一个响应式且可改变的 ref 对象。ref 对象拥有一个指向内部值的单一属性 .value。

当 ref 作为渲染上下文的属性返回(即在 setup() 返回的对象中)并在模板中使用时，它会自动解套，无需在模板内额外书写 .value

Vue 本身已经有 "ref" 的概念了。但只是为了在模板中获取 DOM 元素或组件实例 (“模板引用”)。新的 ref 系统同时用于逻辑状态和模板引用。