内部指令

v-once 该指令能让元素只渲染开头一次，用于性能优化
v-text 用于元素内插入文本
v-html 可以插入html
v-pre 跳过元素和它的子元素的编译过程，显示原始值
v-cloak 这个使mustache标签直到组件实例化完毕得配合属性选择器和display:none 一起使用

v-bind 绑定属性

可以动态绑定多个属性

v-on 绑定事件
v-if、v-else、v-else-if
v-show
v-for

虚拟dom的作用可以做跨平台

key的作用是进行虚拟dom的diff算法对比dom

如果没key的话，则是将变化的dom及后续dom元素进行替换算法，有key则不用只是渲染改变变化部分，其他dom则不动

v-if与v-show区别

v-if是直接销毁dom元素，v-show则是将元素设置display:none进行隐藏，频繁切换则建议使用v-show。不频繁切换则使用v-if（因为v-show一开始无论真假都会被渲染）

不建议v-if与v-for一起使用

因为v-for优先级高于v-if，所以元素无论v-if条件如何都会首先渲染，再进行判断真假后销毁假的dom元素，比较消耗性能，可以采取computed做法

数组更新检测

computed

计算属性可以依赖响应式进行缓存，相对于method来说性能比较节省

watch 侦听器

可以用做侦听数据变化而进行对应地操作

几种写法

watch:{
    info(newval, oldValue){
        console.log(newval, oldValue)
    },
    
    'info.name':function(newval, oldValue){
        console.log(newval, oldValue)
    },
    
    info:{
       handler(newVal,oldval){
           console.log(newval, oldValue)
       },
       deep:true,
       immediate:true
    },
    
    
}

v-model

修饰符

.lazy（是将input事件修改为change）
.trim (是将前后空格去除)
.number（是将字符串数字转换为数字型数字）

组件化

全局注册组件

import { createApp } from 'vue'

import HomeApp from '@/views/home.vue'

const app = createApp(根组件)

app.component('home-app', HomeApp)

app.mount(#app)

局部注册组件

import HomeApp from './HomeApp.vue'
export default{
    components:{
        HomeApp
    }
}

组件名称

项目目录

Babel 是一个 JavaScript 编译器，它能让开发者在开发过程中，直接使用各类方言（如 TS、Flow、JSX）或新的语法特性，而不需要考虑运行环境，因为 Babel 可以做到按需转换为低版本支持的代码；Babel 内部原理是将 JS 代码转换为 AST，对 AST 应用各种插件进行处理，最终输出编译后的 JS 代码。

组件prop和emit

prop两种写法(数组和对象)

数组

对象

非prop属性为根组件继承

emit

插槽slot

具名插槽

作用域插槽

事件总线

provide和inject

生命周期

$refs

动态组件

keep-alive

webpack分包操作及异步组件（了解）

组件v-model（了解）

mixin

composition api 和 options api

vue2 采用options api选项式思想，会使逻辑过于分散，加深组件维护和理解的困难性

setup函数

参数props跟context

reactive 与 ref

ref适合拿来接受接口返回的值

const refVal = ref({})

refVal.value = {......}

readonly

toRefs与toRef

setup中ref获取dom

<template>
    <div ref="divRef"></div>
</template>

<script>
import { onMounted } from 'vue'
    export default{
        setup(){
            const divRef = ref(null)
            onMounted(()=>{
                console.log(divRef)
            })
            return{
                divRef
            }
        }
    }
</script>