Vue3与Vue2的区别

什么是组合式API？

了解什么是组合式API前，先说明，旧式的选项选项编程：旧式编程包括不限于有data、computed、methods、watch等。如果是小项目还好，但一但项目变大了后，就变得难以阅读以及零碎，更何况还有组件嵌套，然后嵌套嵌套再嵌套。

组合式API，指的是在setup函数里，调用别的已经封装好的函数，使代码更加集中。例如，如果用旧式编程，我想实现一个搜索功能，该搜索功能可能有，字符串过滤、敏感字检查、点击执行某某某、提交等功能，这些功能可能分布在componetn、data、methods等地方，很零散，反之用setup，就不同了，可以把这些功能封装好，然后在setup里调用这些封装好的功能，集中在一起，就更好阅读代码！

setup函数

这个是setup函数，接受两个参数：

• props
• context

setup函数里，可以在里面声明变量、方法，这些内容都可以通过setup返回值返回给组件。

setup的作用与methods的一点一样，可以返回一个对象，用{{}}渲染在页面上，不过需要注意的是，setup在整个生命周期只能执行一次！

参数props

props是响应式的，可以根据props选项给setup传入props对象，外面传进了什么，就会改变props！注意，props参数是不可以使用ES6的解析赋值，因为props是响应试的，使用解析赋值，会破坏响应式！

参数context

context提供了一个上下文对象，这是一个普通的JS对象，还暴露了三个组件的property：

export default {
  set(props, context){
      console.log(context.attrs)    //Attribute
    console.log(context.slots)    //插槽
    console.log(context.emit)    //触发事件
  }

因为参数context不是响应式的，可以使用解析赋值。但是里面的attrs与slots是随着组件本身的更新而更新，避免对这两个使用解析赋值。

注意，该函数执行时机是在deforeCreate与created之间，所以除了能访问props、attrs、slots、emit这四个外，其他的不能访问，例如data、computed、methods。

ref

vue3新语法，创建内部盒子！

例子：

const centext = = ref("一成不变")    //一般来说，用const就是常量，内容一成不变才对。
consoe.log(centext.vaule)    // "一成不变"
centext.value = "变啦"
conse.log(centext.value)    //“变啦”

没错，centext确实不能被修改，但可以通过.value来改里面的内容，外面的盒子确实不变。

继承属性

Vue3使用组件里，当组件使用例如<Button @click="xxx">你好</Button>，而这个组件内部文件如下：

<template>
  <button>
    <slot/>
  </button>
</template>

但是却可以点击这个按钮触发@click，没有做任何处理，Vue3就默认把属性传给组件内部的最外层标签！

那么如果我不想让这个属性默认传到最外层而是组件内的其他标签呢？步骤如下：

• 首先使用inheritAttrs: false，禁止默认继承。
• 接着给想要继承的标签绑定一个$attrs或context.attrs（这俩效果一样）
• 那么这个被绑定的元素就可以继承了！

$attrs 与 prope的区别是什么？

• prope需要声明才能用外面的属性，而$attrs就不需要，直接默认继承。
• prope不能接受外面的事件属性，而$attrs是可以接受的。