选项式补充以及组合式API

1, 选项式的补充

1. app.mixin混入 * 提前创建一个对象内部存储公共的部分 * 借住mixin选项将我们创建的公共选项混入vue实例中 * 混入的时候如果组件本身也有相同的选项，data以组件自身的为主，methods以组件自身的为主，watch两个都会执行并且组件自身的会先执行，computed会以组件自身的为主，生命周期两个都会执行并且混入mixin的会先执行 * vue2中可以使用，vue3中不推荐使用 js mixins:[你定义的想要混入的变量]

2. 子组件访问父组件 * 获取子组件的内容需要在父组件调用子组件的时候添加一个ref属性 * 获取子组件需要通过this.$refs.属性名拿到 * 获取父组件通过this.$parent * this.$root可以获取当前组建的根组件

2. 组合式API

1. 其实就是将以前的API统一书写到setup()里面

2. 书写一些你要的数据或方法，在组件中如果想使用setup的一些数据或方法要return出去

3. 在setup中直接书写的对象或数组等任意内容都是没有响应式能力的，也就是说可以渲染到页面中但是没有能力更新，所以在组合式API中写代码要写在setup中并且在这个选项中书写定义的变量的值都没有响应式能力除非我们借助vue给我们提供的一些方法才能完成

4. reactive() * 从vue中结构出reactive这个方法 * 将你想要的响应式数据写到reactive()中，但是只能书写引用数据类型

5. ref() * ref会将传入的基本数据类型包装为一个对象，如果想拿到基本数据类型的值得通过value属性 * ref其实也可以传入一个对象，因为ref会先判断传入的数据是基本数据类型还是引用数据类型，如果是基本数据类型会被包装为一个对象然后调用reactive方法，如果传入的是引用数据类型会直接调用reactive方法

6. ref：包装基本数据类型，reactive：包装引用数据类型 * 响应式数据如果直接解构出来那么这个数据就不具备响应式能力了，所以想要结构出一个具有响应式能力的数据那么要借助toRefs

7. toRefs 响应式数据中如果直接解构出来, 那么这个数据是不具备响应式的 * 结构出来的也是一个响应式数据，需要用到他的.value才能拿到数据 * 如果在结构赋值结构一个原本数据不存在的数据，也会结构出undefined

8. toRef 响应式数据中如果直接解构出来, 那么这个数据是不具备响应式的 * 和toRefs作用类似但是可以结构一些原本不存在的数据 * 想要创建一个原本数据不存在的属性 * let abc = toRef(info,'abc')，后续可以在函数内重新赋值，去info对象中找一个'abc'的数据 * toRef一定会返回一个响应式对象，响应式对象的值根据你传入的参数可能会有变化

3. 各个种类ref的区别

1. ref属性：标记一个标签或者一个组件

2. $ref属性：获取标记的标签或者组件的节点

3. ref方法：可以让其拥有响应式能力

4. toRefs方法：可以结构出一个响应式数据

5. toRef方法：和toRefs方法类似可以结构出一个响应式数据也可以结构出一个原数据没有的响应式数据，此时值为undefined但是可以在函数内对这个数据进行赋值

6. v-bind:'$attrs'，将元素更改为根元素

4. readonly

1. readonly()包裹的属性是只读，不能更改的

2. setup_props

3. 在vue3的组合式API，vue不在推荐我们使用this，this指向window所以不能使用this访问他的一些方法了，在setup(props)这个可以拿到传递给我们的props

4. setup父传子流程 * 在父组件调用时给子组件绑定一些属性 * 在子组件中配置一个props选项接受 * 在setup中第一个形参位置写上props就是原本接收的props * 子组件可以通过第一个形参访问props的内容

5. setup(props,context) * context中的attrs中可以接受属性透传来的属性 * 如果子元素的根标签有多个vue会警告而且需要指定透传给谁通过v-bind='$attrs'来绑定谁是根标签，可以绑定多个

6. slot * v-slot可以简写为#

7. const{h} = Vue * h是vue提供给我们创建虚拟dom的方法 * 在子组件中return () => h('div',{class:'a b c',id:'h_ele',style:'color:red'},['这是我通过h函数创建出来的div标签'，context.slots.left()]) * 上面那个方法可以给具名插槽传入一个div标签 * 在子组件中return () => h('div',{class:'a b c',id:'h_ele',style:'color:red'},['这是我通过h函数创建出来的div标签'，context.slots.default()]) * 上面那个方法可以给普通插槽传入一个div标签

8. 在setup组合式API中标记标签或者标记组件的流程 * 通过ref的方法创建一个响应式数据，在创建的时候可以不给ref传值因为这个变量的初始值不重要 * 在setup中最后的return中一定要把刚才创建的响应式数据返回出去 * 找到你需要标记的标签或者组件给他绑定一个ref属性，切记不要加冒号，属性的值就是你刚才创建的响应式数据的变量 * 此时标记已经完成所以可以在一些合适的时机去使用刚刚创建的响应式对象，它内部的值就是刚刚创建的响应式组件或者数据 * setup的执行时机是替换了beforeCreate和created * 合适的时机有哪些：倒计时器，nexTick()，onMounted()

9. context中的expose()调用可以让组件的数据是不暴露的，默认组件的数据是暴露出去的

10. emit * 准备一个函数将来用于接受子组件传递的数据 * 将刚才创建的函数返回出去 * 在父组件调用子组件时候给子组件绑定一些自定义事件 * 因为this指向window所以触发需要用context.emit('触发函数',传的数据)来触发

5. computed

1. 结构一个computed * const {{computed}} = Vue * const vipCount = computed(()=>{return count.value * 0.8}) * 在setup中通过这种方式创建的计算属性如果想在setup中使用需要vipCount.value才能用

2. 侦听器 * count{watch} = Vue * watch('要侦听那个响应式对象','这个对象发生改变会干什么事','一些配置项例如首次打开执行') * watch([num1,num2],()=>{},)

3. watchEffect * watchEffect(()=>{}) * 首次打开页面的时候执行一次 * 会自动跟踪所有写在回调函数内的响应式数据，任何内部的响应式数据发生变化都会再执行一次