《Vue3》基础知识

每一个功能对应的事件，变量，逻辑都是分散在不同的api中，或者说分散在data，methods中，这种代码组织方式叫做Options API，当内容不多时，结构很清晰，内容很规整，但是一旦组件内容复杂起来，那么此时的vue文件里面会显得非常的散乱，没有办法将功能点对应的变量和方法监听等放在一个地方做分类；

因此，为了解决这种问题，Vue3开始改革，新的代码组织方式称为Componsition API，这个代码组织方式是以逻辑功能为分割方式进行组织的，因此一定程度上解决了逻辑散乱的问题，它不再以data，methods，computed等api为拆分点，而是统一写在一个Setup函数内（具体替代使用方式下面会分节介绍），当然ComponsitionAPI是可选的，不代表一定要这么写，不喜欢的依旧可以使用Options API的方式进行编码；

setup函数

---

setup函数，是Vue3中新增的一个API，或者也可以称之为生命周期函数，它的运行阶段还在beforeCreate这个生命周期之前；

这个函数也是CompositionAPI的入口函数，简单的说，ComponsitionAPI就是将data函数，methods，computed这些通通写在setup这个函数里，不再单独存在；

注意的是，因为setup函数运行在生命周期beforeCreate之前，因此在其内部是没有this这个概念的，先看个示例，具体后面会逐一介绍：

export default {

setup(props,context) {

//编写代码

}

};

另外，这个函数是有两个可选参数的，分别是props和context;

props

用来获取组件中的props，上文说了step中没有this，那么传递过来的props在step中就无法获取到了，为了解决这个问题而诞生了这个属性，具体是有如下

export default {

props: {

msg: String

},

setup(props) {

console.log(props.msg);

const data = reactive({

age: 18,

year: computed({

get: () => {

return 2021 - data.age;

},

set: val => {

data.age = 2021 - val;

}

})

});

//导出，供模版使用

return { …toRefs(data)};

},

methods: {

handleClick() {

console.log(this.age);

}

},

computed: {

computedAge() {

return 12;

}

}

};

例子中直接打印props上的msg是可以获取到父组件传递过来的值的，另外props中的值是只读的，只允许读，不可以改；

context

这个就是变相代替this的变量，上文说过setup中没有this的，如果确实需要在setup中使用this，比如向父级传递一个消息，那么就可以使用context代替，比如

import { watch } from “vue”;

export default {

setup(props, context) {

watch(

() => data.age,

(newTitle, oldTitle) => {

console.log(newTitle, oldTitle);

context.emit(“handle”, 1);

}

);

//导出，供模版使用

return { };

}

};

这里就是监听了一个名为data.age的属性，一旦这个属性发生变化，就向父级传递一个handle方法

data函数

---

在Vue2的版本中，data函数是具有响应式的变量存储的地方，使用方式如下：

data(){

return {

name:“oliver”

}

}

如果在compositionAPI的书写方式，也就是setup中书写则需要改成

{{name}}:{{age}}

如果通过打印name和age，就可以发现，age和name是一个对象，我们定义的值都是保存在其名为value的属性上

methods的使用

---

在Vue2中methods是定义事件的地方，本组件内所有事件都是定义在methods里的，比如

export default {

methods: {

handleClick() {

console.log(this.name);

}

}

};

如果在compositionAPI的书写方式，也就是setup中书写则需要改成

{{name}}:{{age}}

<button @click=“handlePlus”>点击+1

<button @click=“handleClick”>点击

从代码可以看到，方法的定义和在js中定义function没有生命区别，直接定义就可，唯一的区别在于必须导出才可以在模版中使用；

另外，如果需要对定义的响应式变量进行操作，也就是代码里的age进行自增，不能是age++，因为age并不是一个数字，而是Vue3创建的一个响应式对象，如果要对其值进行改变，修改的应该使其的value值，也就是代码示例中的age.value++；

computed计算属性

---

在Vue2中，通常定义一个计算属性的方式如下：

export default {

computed: {

computedAge() {

return 12;

}

}

};

同样，计算属性也是可以定义在setup函数中的，如果在compositionAPI的书写方式，也就是setup中书写则需要改成

<button @click=“handleAge(-1)”>点击-1

{{name}}:{{age}}:{{computedAge}}

<button @click=“handleAge(1)”>点击+1

<button @click=“handleClick”>点击

出生日期:{{year}}

在setup中计算属性是通过Vue3新增的computed方法定义的，接收一个函数作为参数，其返回值就是计算属性的值，同样，如果打印这个计算属性，也就是例子中的year，可以看出它是一个对象，值同样也是保存在value属性上的，因此在模版中的使用其实Vue也是和data一样，读取的是其value的值；

那么，新问题来了，如果想要修改computed属性，也就是需要设置计算属性的setter和getter，该怎么设置，比如，给例子的出生日期增加事件，修改出生日期的同时也能修改年纪；

<button @click=“handleAge(-1)”>点击-1

{{name}}:{{age}}:{{computedAge}}

<button @click=“handleAge(1)”>点击+1

<button @click=“handleClick”>点击

<button @click=“handleYear(1)”>点击+1

出生日期:{{year}}

<button @click=“handleYear(1)”>点击+1

响应式对象

---

从上面例子中可以看出，在setup中对于响应式变量的获取是通过xxx.value获取，之后需要return返回，那么问题就来了，如果一个组件内的值很多，此时return就会变得非常庞大；

因此，Vue3提供了一个新的函数，允许使用者定义一个响应式的对象，最后只需要返回这个响应式对象就可以了

<button @click=“handleAge(-1)”>点击-1

{{data.name}}:{{data.age}}:{{computedAge}}

<button @click=“handleAge(1)”>点击+1

<button @click=“handleClick”>点击

<button @click=“handleYear(1)”>点击+1

出生日期:{{data.year}}

<button @click=“handleYear(1)”>点击+1