目录
选项式
选项式声明并使用一个变量的方法如下：
<script>
export default {
data(){
return{
message_export_data: 'hello message_export_data!'
}
}
}
</script>
<template>
<h1>{ { message_export_data }}</h1>
</template>
运行后'hello message_export_data!'将显示在页面上。
关于data
Data中的数据是一个普通的对象，一般需要使用return返回数据，使用return包裹后，变量只在当前组件中生效，不会影响其他组件。
在其中可以声明多个对象并使用。
示例：
<script>
export default {
data(){
return{
obj1:{
message_export_data: 'hello message_export_data!'
},
obj2:{
message_export_data: 'hello obj2:message_export_data!'
}
}
}
}
</script>
<template>
<h1>{ { obj1.message_export_data }}</h1><br>
<h2>{ { obj2.message_export_data }}</h2>
</template>
运行结果如下：
除了data（），vue常用的属性还有computed、watch、methods。
关于computed
当被定义的数据（data中的）需要经常发生改变时，优先选择使用computed。
例如：收入-指出=净收入
<script>
export default {
data(){
return{
income : 6000,
pay_out : 2000
}
},
computed:{
net_income(){
return this.income - this.pay_out
}
}
}
</script>
<template>
<h1>净收入为：{ { net_income }}</h1><br>
</template>
运行结果如下：
Computed优秀的地方在于，如果 computed 依赖的数据发生改变，将会重新进行计算并进行缓存；而当其他数据改变时，computed并不会重新计算。
关于watch
是一个监听器，用于监听data中的数值变化，watch中的方法默认是不执行的，只有当监听的数值发生变化时才会执行。
因此不要在computed或者watch中修改被监听的值，以免发生死循环。
例如下面的例子实现的功能是：
当a值增大时，b值减小，当a值减小时，b值不变。
<script>
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.change<0){
return this.b;
}
}
},
}
</script>
<template>
<span>a:{ { a}}</span><br>
<span>b:{ { b}}</span><br>
<button @click="change_a_up">a++</button><br>
<button @click="change_a_down">a--</button>
</template>
以上例子中，watch中被监听的a携带了一个回调函数，当监听到a 的值发生变化时，执行了这个回调函数。回调函数的两个参数分别是新值和旧值，以下是运行结果。
需要注意的一点是，watch中的函数名称必须要和data中的属性名一致，watch是依赖于 data中的数据去工作的。
关于methods
用于在vue中定义函数，与以上三种不同的是，定义在methods中的函数需要被手动调用才可以执行，具体参照“watch”中的例子。
以上几种的区别
- methods 里面的函数需要被调用才可以执行。
- watch和computed：computed中的函数必须要用return返回，watch则不必要；watch更擅长一个数据影响多个数据的场景，而computed更擅长多个数据影响一个数据的场景。
组合式
组合式声明并使用一个变量的方法如下：
<script setup>
import { ref } from 'vue'
const message_import_ref_const = ref('hello message_import_ref_const!')
</script>
<template>
<h1>{ { message_import_ref_const }}</h1>
</template>
运行后'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属性的对象。
看下面示例：
<script setup>
import { ref } from 'vue'
const num = ref(66)
console.log(num) //直接在控制台打印num
</script>
此时控制台的输出如下：
将打印num改为打印mun.value:
此时的控制台输出：66
而当ref在模板标签中作为顶层属性被访问时，它们会被自动解包，例如我们最开始的例子：
此时不需要使用.value也可以得到数据。
同样的，当ref被嵌套在一个响应式对象中时，它也会自动解包：
<script 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
</script>
遗憾的是，与响应式对象不同，当 ref 作为响应式数组或像 Map 这种原生集合类型的元素被访问时，不会进行解包。
即当ref出现在数组或原生集合中时，依旧需要使用value获取数据，如下示例：
控制台输出如下：
关于reactive
reactive和ref一样，都是用来创建响应式数据。
而reactive的参数一般是对象或者数组,他能够将复杂数据类型变为响应式数据。
当用reactive声明基本数据类型时：
const num = reactive(100);
Vue给出了一个警告：
以上。