vue

组合式api

• ref 创建一个响应式的ref对象（状态）

  • 读取和修改它的值是通过 value属性来操作

• shallowref 创建一个浅层的ref对象,对象里面的属性的修改不会引起响应式，只有对这个ref对象进行整体的.value的赋值才会引起视图更新

• reactive 创建一个被代理的响应数据,代理的是对象或者是数组这类的引用数据类型的数据

• shallowReactive 创建一个浅层的reactive响应对象，仅仅只有根级别的属性的变化才会引起视图的更新。

• watch

  • watch(监听的状态,(nv,ov)=>{})
  • watch( 监听的状态, ()=>{}, // 处理函数 { deep:是否深度监听, immediate: 是否立即执行一次 } )
  • watch("对象.属性",()=>{})
  • watch(()=> this.状态.某个属性 ,()=>{})
  • watch([状态1,状态2...],()=>{ 可以监听多个状态} )

• watchEffect

  • 跟watch的区别是它不需要指定监听的状态，会自动的根据副作用函数使用到的状态来自动的去监听其对应的变化
  • watchEffect( 副作用函数, { flush: 'post'} )
  • watchEffect( 副作用函数, { flush: 'sync '})

• watchPostEffect

• wathSyncEffect

• provide/inject

  • 父辈组件 setup(){ provide(keyname, value) } 后代组件 setup(){ inject( keyname, 默认值) }

• 工具函数

  • isRef 判断一个值是否是ref对象
  • unref 如果是ref就返回ref的value 如果是普通值就直接返回值本身
  • toRef 单独的取出一个响应式对象(reactive)的某个属性，并且保持跟源对象的同步
  • toRefs 把一个响应式对象(reactive对象)转换成一个普通的对象但是会保持这个对象的属性跟源对象的同步

• setup（props, context）

  • props

    • 得到组件的自定属性, 这些属性也需要实现在props当中声明才能接收

  • context

    • context.expose 在setup函数内部 指定当前的组件对外暴露的属性或者方法 context.expose({ 暴露的属性或者是方法 })
    • context.emit 等同 this.$emit
    • context.attrs 等同 this.$attrs
    • context.slots 等同 this.$slots

选项式/配置 API

• el: 可以是css选择器也可以原生的elemnt节点对象 eg: el:'#app’ 或者 document.getElementById('app')

• data： 状态( vue对对于这里声明的所有属性进行递归处理 给每个属性都加上getter和setter vue2: Object.defineProperty来处理 vue3: new Proxy 来处理 在setter当中可以劫持对于 状态的修改的行为，从而主动的去进行试图的更新 )

  • new 根实例的时候 的data 可以是对象也可以是函数 因为 根实例只有一个没有 组件复用的困扰
  • 组件的data 必须是 函数返回一个对象，因为组件就是为了方便重复使用，所以要确保每个组件都有自己独立的状态，所以通过函数执行返回的状态就能够保持这种独立。

• computed 计算属性

  • { computed:{ 计算属性(){ return 经过计算之后得到的计算属性的值 } } }
  • { computed:{ 计算属性:{ get(){ }, set( ){ } } } }
  • 计算属性的值是有缓存的！！！ 仅仅在它相关的依赖发生变化的时候才会重新计算。 所有在一些根据其他的状态计算出来的值的情况下 性能会更优！！！ 比如说 购物车的总价，一个列表当中的总数等场景

• watch 监听器/侦听器

  • { watch:{ 要监听的状态( 新的值，旧的值){ }, 监听的状态:{ hanlder // 处理函数 deep // 是否深度监听 immediate // 是否在初始化的时候立即执行一次处理函数 }, "对象.属性"(){ } // 监听某个对象指定的属性的变化 } }
  • watch默认情况下(deep为false)只会监听一个状态对应的内存地址的变化，所以如果这个状态是一个对象且仅仅是某个属性发生变化是监听不到变化的，需要配置deep： true或者 直接监听万整个指定属性的变化

• methods 自定义函数

• filters( vue2 )

  • {{ 值 | 过滤器函数 }} { filters:{ 过滤器函数(){ return 处理好的新的值 } } }
  • 过滤器 实际上就是一个普通的函数，只是改变了函数的调用方式 所以在vue3当中移除了这个api

• template 配置一个自定义组件的渲染内容

• props 声明自定义组件接受的外部的属性

  • props: [ 属性1, 属性2 ,.....]
  • props: { 属性名: 类型, 属性名:{ type: 类型, required:是否必填, default: 普通数据类型, default(){ return 对象/数组 }, validator(val){ 对于接收的值进行自定义的校验 通过返回布尔值来表示通过与否 } } }

• 生命周期函数/ 生命周期钩子

  • beforeCreate 组件实例创建之前
  • created 组件实例创建完成 这个是后data已经完成了初始化 可以对数据进行处理了，所以所这个周期开始就可以去 获取数据
  • beforeMount 挂载完成之前
  • mounted 挂载完成之后 这个周期开始 组件已经完成了在网页当中的挂载所以就可以操作节点。 比如地图的创建 图表的创建都是要在节点上操作的话就可以在这个时间去初始化
  • beforeUpdate 更新之前
  • updated 完成更新之后
  • beforeDestroy / beforeUnmount 组件卸载之前 这个点是去进行一些组件销毁前的一些移除事件监听以及清楚定时器等最好的时机
  • destroyed / unmounted 组件完成了卸载
  • activated激活 被缓存的组件 在created之后会触发一次，之后的每次切换回来都会触发一次激活,所以 被缓存的组件 获取数据的操作 应该放在 这个周期里面执行。 因为挂载阶段的钩子都只会执行一次！！！
  • deactivated 失活， 同样是在被缓存的组件才会有的生命周期函数， 缓存了的组件不会被销毁，所以一些移除监听或者是清除定时器等的操作就从beforeDestroy 改到这里来操作

• components 局部注册组件 局部注册的组件仅在当前的组件内可以使用

  • { components:{ 组件名: 组件的配置项 } }

• mixins 局部混入 把一些公共的配置混入到当前的组件当中，使用这个api我们可以把一些公共的配置提炼出来

  • const mix1 = 配置1 const mix2 = 配置2 { mixins: [ mix1,mix2 ] }

• extends 继承， 它的效果跟mixins差不多，唯一的区别就是 mixins可以混入多个，但是继承只能继承一个！！！

• provide/inject 依赖注入 我们可以在某个父组件使用provide来供应一些数据 然后在这个父组件的所有的后代组件当中可以使用 inject来注入供应的数据 从而实现跨组件的通讯

  • provide

    • { provide:{ 供应的数据} }
    • { provide(){ return { 供应的数据} } }

  • inject

    • { inject: [ 注入的数据名称..... ] }
    • { inject:{ 别名1： '数据源1', 别名2: { from: ’数据源名称’, default: 默认值（普通的数据类型）, default(){ return 数组/对象 } } } }

• name 在keep-alive的时候会优先匹配name的配置

• model 用来定制自定义组件使用v-model的时候绑定的属性和监听的事件

  • vue2: { model:{ prop: 绑定的属性(默认是value), event: 监听的事件(默认是input) } }

• render 渲染函数

  • v2.cn.vuejs.org/v2/guide/re…

• directives 自定义指令

  • vue2

  • 钩子得到的参数

    • vnode当中的context属性指向的是当前组件的实例( 在自定义指令里面的this指向全局window对象！！ )

• expose(vue3)

  • 执行组件实例对外暴露的属性或者方法（通过ref来获取组件实例的时候 如果是vue2会得到组件的全部的属性或者方法但是vue3如果配置了expose就会限定对外暴露的内容）

模板指令

• v-text 插入文本内容

• v-html 插入html内容

  • 使用v-html一定要确保插入的内容的安全性 如果内容是一些而已xss攻击脚本 会有安全隐患

    • 什么是XSS攻击？
    • 怎么预防( 一定要用v-html的话 )

• v-if/ v-else-if/ v-else条件渲染 根据表达式的布尔值结果来判断是否进行渲染

• v-show 根据表达式的布尔值结果来控制css display来实现显示或者隐藏

• v-bind

  • 简写形式 v-bind:id 等同于 :id

  • 属性的绑定 ：属性名 = ”属性的值“

    • class的绑定

      • 字符串 ：class= "'a b c'"
      • 数组 :class="['a','b','c']"
      • 对象:class="{a:true,b:false,c:"abc"}"

    • style的绑定

      • 对象:style="{color:'red',fontSize: '30px'}"

• v-for

  • v-for="item of 数组"
  • v-for="(item,index) of 数组"
  • v-for="item of 字符串"
  • v-for="item of 数字"
  • v-for="(val,key) of 对象"
  • v-for使用的时候一定要绑定一个唯一的key属性

• v-on

  • 简写 @ v-on:click 等于 @click

  • @click=“函数”

    • 如果直接等于一个函数那么函数的第一个参数就是合成事件对象event

  • @click="函数()"

    • 函数执行的写法可任意自定义传参

    • 如果需要获得合成事件对象需要手动的传入$event对象

      • @click(1,$event)

  • 事件的绑定不一定是等于一个函数也可以是一个简单的语句 @click="a++"

  • 也可以通过对象的方式来同时绑定多个事件 v-on="{ 事件类型1: 执行函数， 事件类型2: 执行函数 }"

    • v-on=“{keyup: fn1,keydown:fn2}”

  • 修饰符

    • .once 单次绑定

    • .capture 捕获阶段触发

    • .stop 阻止冒泡

    • keycode/ keyAlias 通过通知指定按键的code或者是别名来限制触发的按键条件 一般用到keypress/keyup/keydown 这些跟按键有关的事件当中

      • keycode的相关说明 developer.mozilla.org/zh-CN/docs/…

    • .prevent 阻止浏览器的默认行为

• v-pre

  • 使用了v-pre的话 那么在节点的范围内不再进行任何编译

• v-once

  • 使用了v-once的话 那么在节点的范围内只会编译1次 后续的状态的修改都不会再次更新

• v-model 双向绑定

  • 无论自定义组件还是原生的表单控件 v-model 实际上在vue的作用下都是 监听某个事件和绑定某个属性的语法糖

    • 在原生的表单元素上 v-model会根据表单元素的类型去实现不同的属性绑定和不同的事件监听

  • 提示提示！！！ （表单元素或自定义组件的双向绑定 并不是vue的双向绑定） v-model的原理其实就是绑定一个属性和监听一个事件的语法糖 vue的双向绑定指的是vue实现原理 vue2 Object.defineProperty 和 vue3 Proxy

  • 修饰符

    • .lazy 把input的事件的监听改为change事件
    • .number 把绑定的指强制的换成number类型
    • .trim 对于输入的内容去掉头尾的空格

• v-slot

  • v-slot:插槽名称=”插槽作用域“ #插槽名称=”插槽作用域“
  • 只能在标签上使用！ ( 自定义组件？？？？)

vue的全局方法

• 全局注册组件

  • vue2 Vue.component(组件名称, 组件的配置内容)
  • vue3 app.component(组件名称，组件的配置内容)

• 全局混入

  • vue2 Vue.mixin({ 要混入的配置 })
  • vue app.mixin()

• Vue.extend 用来创建一个继承了某些已有的配置的来新建的一个 vue的构造器，通过继承得到的构造器，在new 的时候就具备了继承的所有配置

• 全局注册过滤器

  • vue2 Vue.filter(过滤器名称, 处理函数)

• vue2 Vue.use(插件) vue3 app.use(插件)

  • 插件实际上就是一个对象，这个对象一定要实现一个 install方法 ，Vue.use一个插件实际上就是执行这个插件对的想installl方法传递一个Vue构造函数进去，如果是vue3的话 传递进去的是 createApp创建的应用实例

• 全局注册自定义指令

  • vue2 Vue.directive
  • vue3 app.directive

组件实例上的属性或者方法

• $el 组件最终渲染的根节点元素(挂载的元素节点)

• $data 指向组件声明的状态data

• $attrs 得到除了props接收的属性以外的自定义属性(官方还是推荐我们尽量的使用props来接传参)

• $emit 在组件内部触发一个绑定在组件上的自定义事件，并传递参数（子传父）$emit(事件名称，传参)

• $refs

  • 组件内部通过$refs来归集所有设置了ref属性的dom元素或者是自定义组件实例

• $parent 得到当前组件的父组件实例

• $children 得到当前组件的所有的子组件实例组成的数组

• $root 得到 根实例

• $nextTick

  • 如果我们有些操作需要在状态变化且因为这次变化导致的视图更新完成之后再操作的，就需要使用$nextTick ，因为vue的状态修改引起是视图更新是异步的。

• $forceUpdate 强制更新视图

• $set

  • 原理: 使用Object.defineProperty来给某个对象的执行属性添加getter setter从而让这个属性局部响应式的特征

  • this.$set(对象,属性,初始值)

  • this.$set(数组,索引值,初始值)

  • 为什么数组 直接通过索引值修改成员不会引起视图更新???

    • vue为了性能考虑，并不会递归这个数组给每个成员增加get/set 引起数组可能有很多很多的成员所以性能消耗过大
    • 但是vue 改写了数组的 pop/push/unshift/shift/splice/sort/reverse 这些方法 ，所以在调用这些方法的时候也会引起视图更新

  • vue3为什么不需要 $set ??? 引起vue3是使用 proxy来代理整个对象，无论操作的属性是否实现声明，proxy都能劫持到这个修改的行为

• $mount

  • vue实例执行$mount 执行挂载的节点，等同于在vue当中配置 el

• $watch

  • this.$watch(监听的状态,(nv,ov)=>{})
  • this.$watch( 监听的状态, ()=>{}, // 处理函数 { deep:是否深度监听, immediate: 是否立即执行一次 } )
  • this.$watch("对象.属性",()=>{})
  • this.$watch(()=> this.状态.某个属性 ,()=>{})

• $on /$once 监听事件 / 单次监听事件

  • 可以通过 $emit来触发

• $off 移除事件监听

• $slots 得到使用组件的时候 放置在组件直接的内容，通过 this.$slots来访问到对应的插槽内容转换的虚拟dom,这些虚拟dom就可以在 render函数当中使用