Vue选项式和组合式两种方法声明变量以及基本属性的讲解

目录

选项式

关于data

关于computed

关于watch

关于methods

以上几种的区别

组合式

关于const，var和let

关于ref

关于reactive

---

选项式

选项式声明并使用一个变量的方法如下：

运行后'hello message_export_data!'将显示在页面上。

关于data

Data中的数据是一个普通的对象，一般需要使用return返回数据，使用return包裹后，变量只在当前组件中生效，不会影响其他组件。

在其中可以声明多个对象并使用。

示例：

运行结果如下：

 除了data（），vue常用的属性还有computed、watch、methods。

关于computed

当被定义的数据（data中的）需要经常发生改变时，优先选择使用computed。

例如：收入-指出=净收入

运行结果如下：

 Computed优秀的地方在于，如果 computed 依赖的数据发生改变，将会重新进行计算并进行缓存；而当其他数据改变时，computed并不会重新计算。

关于watch

是一个监听器，用于监听data中的数值变化，watch中的方法默认是不执行的，只有当监听的数值发生变化时才会执行。

因此不要在computed或者watch中修改被监听的值，以免发生死循环。

例如下面的例子实现的功能是：

当a值增大时，b值减小，当a值减小时，b值不变。

以上例子中，watch中被监听的a携带了一个回调函数，当监听到a 的值发生变化时，执行了这个回调函数。回调函数的两个参数分别是新值和旧值，以下是运行结果。

需要注意的一点是，watch中的函数名称必须要和data中的属性名一致，watch是依赖于 data中的数据去工作的。

关于methods

用于在vue中定义函数，与以上三种不同的是，定义在methods中的函数需要被手动调用才可以执行，具体参照“watch”中的例子。

以上几种的区别

1. methods 里面的函数需要被调用才可以执行。
2. watch和computed：computed中的函数必须要用return返回，watch则不必要；watch更擅长一个数据影响多个数据的场景，而computed更擅长多个数据影响一个数据的场景。

组合式

组合式声明并使用一个变量的方法如下：

 setup>

import { ref } from 'vue'

const message_import_ref_const = ref('hello message_import_ref_const!')

运行后'hello message_import_ref_const!'将显示在页面上，注意标签里的setup，setup是组合式的标志，所有的组合式都要在setup中进行。

在上述代码中，使用了ref()创建了一个响应式对象。

在vue组合式中，我们可以使用ref()函数或者reactive() 函数创建一个响应式对象或数组。基本数据类型用ref包，引用类型用reactive包。

响应式对象其行为表现与一般对象相似。不同之处在于 Vue 能够跟踪对响应式对象属性的访问与更改操作。

关于const，var和let

const将变量声明为一个常量，不可被修改，并且必须赋初值，不能在声明前使用变量。

当企图修改const类型的变量时：

 发生以下错误：

Var声明的变量可以被修改，当未赋初值时输出undefined，并且不会报错，可以在声明变量前使用变量。Var允许重复声明，重复声明时值会被覆盖。

 Let声明的变量在相同代码块内不允许重复声明，且只在所在的代码块内有效，在变量声明前不能使用变量，这些特点const同样具备。不同的是let当未赋初值时输出undefined，不会报错。

总结：

实际使用时，const > let > var

const 大多被用于声明引用数据，let大多被用于声明基本数据类型。

关于ref

Vue 为我们提供了一个 ref() 方法来允许我们创建可以使用任何值类型的响应式。

它将传入参数的值包装为一个带.value属性的对象。

看下面示例：

 setup>

import { ref } from 'vue'

const num = ref(66)

console.log(num)  //直接在控制台打印num

此时控制台的输出如下：

将打印num改为打印mun.value:

此时的控制台输出：66

而当ref在模板标签中作为顶层属性被访问时，它们会被自动解包，例如我们最开始的例子：

此时不需要使用.value也可以得到数据。

同样的，当ref被嵌套在一个响应式对象中时，它也会自动解包：

 setup>

import { ref } from 'vue'

import { reactive } from 'vue'

const num = ref(66)

const num2 = reactive({

    num

})

console.log(num) //输出num对象

console.log(num.value) //输出66

console.log(num2.num)  //输出66

遗憾的是，与响应式对象不同，当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。

即当ref出现在数组或原生集合中时，依旧需要使用value获取数据，如下示例：

控制台输出如下：

关于reactive

reactive和ref一样，都是用来创建响应式数据。

而reactive的参数一般是对象或者数组,他能够将复杂数据类型变为响应式数据。

当用reactive声明基本数据类型时：

const num = reactive(100);

Vue给出了一个警告：

以上。