共计 3231 个字符，预计需要花费 9 分钟才能阅读完成。
目录
选项式
关于 data
关于 computed
关于 watch
关于 methods
以上几种的区别
组合式
关于 const，var 和 let
关于 ref
关于 reactive
选项式
选项式 声明并使用一个变量的方法如下：
export default {
data(){
return{
message_export_data: ‘hello message_export_data!’
}
}
}
{{message_export_data }}
运行后 ’hello message_export_data!’ 将显示在页面上。
关于 data
Data 中的数据是一个普通的对象，一般需要使用 return 返回数据，使用 return 包裹后，变量只在当前组件中生效，不会影响其他组件。
在其中可以声明多个对象并使用。
示例：
export default {
data(){
return{
obj1:{
message_export_data: ‘hello message_export_data!’
},
obj2:{
message_export_data: ‘hello obj2:message_export_data!’
}
}
}
}
{{obj1.message_export_data }}
{{obj2.message_export_data }}
运行结果如下：
除了 data（），vue 常用的属性还有 computed、watch、methods。
关于 computed
当被定义的数据（data 中的）需要经常发生改变时，优先选择使用 computed。
例如：收入 - 指出 = 净收入
export default {
data(){
return{
income : 6000,
pay_out : 2000
}
},
computed:{
net_income(){
return this.income – this.pay_out
}
}
}
净收入为：{{net_income }}
运行结果如下：
Computed 优秀的地方在于，如果 computed 依赖的数据发生改变，将会重新进行计算并进行缓存；而当其他数据改变时，computed 并不会重新计算。
关于 watch
是一个监听器，用于监听 data 中的数值变化，watch 中的方法默认是不执行的，只有当监听的数值发生变化时才会执行。
因此不要在 computed 或者 watch 中修改被监听的值，以免发生死循环。
例如下面的例子实现的功能是：
当 a 值增大时，b 值减小，当 a 值减小时，b 值不变。
export default {
data(){
return{
a : 1,
b : 100,
change : 0
}
},
methods:{
change_a_up(){
this.a++;
},
change_a_down(){
this.a–;
}
},
watch:{
a : function(newval,oldvar) {
this.change = newval–oldvar;
if(this.change>0){
return this.b–;
}else if(this.change0){
return this.b;
}
}
},
}
a:{{a}}
b:{{b}}
@click=”change_a_up“>a++
@click=”change_a_down“>a–
以上例子中，watch 中被监听的 a 携带了一个回调函数，当监听到 a 的值发生变化时，执行了这个回调函数。回调函数的两个参数分别是新值和旧值，以下是运行结果。
需要注意的一点是，watch 中的函数名称必须要和 data 中的属性名一致，watch 是依赖于 data 中的数据去工作的。
关于 methods
用于在 vue 中定义函数，与以上三种不同的是，定义在 methods 中的函数需要被手动调用才可以执行，具体参照“watch”中的例子。
以上几种的区别
- methods 里面的函数需要被调用才可以执行。
- watch 和 computed：computed 中的函数必须要用 return 返回，watch 则不必要；watch 更擅长一个数据影响多个数据的场景，而 computed 更擅长多个数据影响一个数据的场景。
组合式
组合式 声明并使用一个变量的方法如下：
setup>
import {ref } from ‘vue’
const message_import_ref_const = ref(‘hello message_import_ref_const!’)
{{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 给出了一个警告：
以上。
原文地址: Vue 选项式和组合式两种方法声明变量以及基本属性的讲解
