Ref

说明

ref()方法用于创建任何值类型的响应式数据

1、ref()方法将传入的参数包装为ref对象，通过.value形式获取到的数据为响应式的，在此基础上进行赋值操作才是响应式的 2、在template中并不需要添加.value，程序会自动添加.value 3、null作为原始数据类型采用ref包裹

注意点

常用于对基本数据类型实现响应式数据 对于应用数据类型虽然可以处理，但是实际上求助于reactive实现

Eg

ts
    <template>
      <!-- 模板中不需要添加.value，程序会自动处理 -->
      <p @click="addnum">{{a}}</p>
    </template>

    <script>
    import {ref} from 'vue';

    export default {
      name: 'App',
      setup(){
        let a=ref(0)
        function addnum(){
          console.log('a',a)
          /* console.log
            a RefImpl {__v_isShallow: false, dep: Set(1), __v_isRef: true, _rawValue: 0, _value: 0}
                dep: Set(1)
                [[Entries]]
                n: 0
                w: 0
                size: 1
                [[Prototype]]: Set
                __v_isRef: true
                __v_isShallow: false
                _rawValue: 1
                _value: 1
                value: 1
                [[Prototype]]: Object
          */
          //  需要通过.value形式获取到响应式数据，在此基础上操作
          a.value++
        }
        return {
          a,
          addnum
        }
      }
    }
    </script>

    <style>
    </style>

配合TS使用

自动推导

ref会根据初始化时的值推导其类型

ts
    import { ref } from 'vue'

    // 推导出的类型：Ref<number>
    const year = ref(2020)

传入泛型

在调用ref()时传入一个泛型参数，覆盖其默认的推导 若指定了一个泛型参数，但是没有指定初始值，则会得到一个对应参数和undefind构成的联合类型

ts
	import { ref } from 'vue';
	import type { Ref } from 'vue'
	let serchType: type<boolean> = ref(false);

	// 推导得到的类型：Ref<number | undefined>
	const n = ref<number>()

创建响应式数据之reactive

说明

通过reactive()方法创建一个响应式对象或数组

参数

reactive参数只能是对象、数组、map和set

特点

1、VUE3使用reactive包裹的数组，可以直接通过角标更改，会检测到更改，但是Vue2中不会 2、VUE3使用reactive包裹的对象，对于对象不存在的属性可以直接更改赋值

Eg

vue
<template>
	<p @click="addnum">{{ a }}</p>
  <p @click="changeB">{{b}}</p>
</template>

<script>
import { reactive } from "vue";
export default {
	name: "App",
	setup() {
		let a = reactive({name:"xm",age:19});
        let b = reactive(['x','y','z'])
		function addnum() {
			a.name='xh'
            a.like="com" // vue2中对于对象不存在的属性无法直接更改,vue3可以
		}
        function changeB(){
          b[0]='a' // vue2中直接通过数组角标无法更改,vue3可以
        }
		return {
			a,
            b,
			addnum,
            changeB
		};
	},
};
</script>

<style></style>

配合TS使用

自动推导

reactive同样会根据初始值推导类型

ts
// 推导得到的类型：{ title: string } 
const titleinfo = reactive({ title: '标题' })

使用接口

通过定义接口的方式指定reactive的类型

ts
interface titleInterface {
	title: string
}


const titleinfo:titleInterface = reactive({ title: '标题' })