VUE学习（持续更新ing）

目录

VUE

模板语法

事件修饰符

计算属性computed

监视属性watch

条件渲染

列表渲染：

收集表单数据

自定义指令：​编辑

Vue2生命周期：​编辑

ref属性：

配置项props

mixin混入

插件plugin

scoped样式

消息订阅与发布（pubsub）

nextTick

插槽slot

VUE3

reactive函数

setup注意点

computed函数

Watch函数

watchEffec函数

VUE3生命周期

自定义hook函数

toRef

shallowReactive 与 shallowRef

readonly 与 shallowReadonly

toRaw 与 markRaw

customRef

provide 与 inject

响应式数据的判断

Fragment

Teleport

Suspense

---

VUE

模板语法

插值语法

{{name}}

用于解析标签体内容

指令语法

v-bind ，用于解析标签，动态绑定值，单向绑定，可以简写为 ：

vue中有很多指令，形式都为v-xxx

v-model，双向绑定，只能应用在表单类元素（输入类元素）

v-on ,用于事件绑定，可以简写为@

事件的回调需要配置在methods对象中，最终会在vm上

methods中配置的函数，不要用箭头函数，否则this就不是vm而是window

@click="demo"和@click="demo($event)"效果一致，但后者可以传参

data和el的两种写法

//data的第一种写法：对象式
data:{
    name:'Libra'
}
//data的第二种写法：函数式
data:function(){
    return {
        name='Libra'
    }
}
​
//el的第一种写法 ====> #用于绑定id  .用于绑定class
el:'#root' 
//el的第二种写法 
vm.$mount ('#root')

​

事件修饰符

• prevent 阻止默认事件

• stop 阻止事件冒泡

• once 事件只触发一次

• capture 使用事件的捕获模式

• self 只有event.target是当前操作的元素时才触发事件

• passive 事件默认行为立即执行，无需等待事件回调执行完毕

计算属性computed

定义：要用到的属性不存在，要通过已有属性计算得来

原理：底层借助了Object.defineproperty方法提供的setter和getter

优势：与methods实现相比，内部有缓存机制（复用），效率更高

监视属性watch

当被监视的属性变化时，回调函数自动调用（handler）

监视多级结构中所有属性的变化（深度监视）：deep: true

初始化时让handler调用一次：immediate: true

监视的两种写法：

    //1.  new Vue时传入watch配置
    //2.  通过vm.$watch监视
    
    watch:{
        'numbers.a':{
            handler(newValue,oldValue){
                console.log("111");
            }
        }
    }

computed 和watch之间的区别：

• computed能完成的功能，watch都可以完成

• watch能完成的功能，computed不一定能完成。例：watch可以进行异步操作

• tips:

1. 所有被Vue管理的函数，最好写成普通函数，这样this指向才是vm 或 组件实例对象。

2. 所有不被Vue管理的函数（定时器的回调函数，ajax的回调函数，promise的回调函数等）最好写成箭头函数，这样this的指向才是vm 或 组件实例对象。

条件渲染

v-show=“表达式”:适用于切换频率高的场景，不展示的dom元素未被移除

v-if=“表达式”：适用于切换频率低的场景，不展示的dom元素直接被移除。同时可以配合v-else-if 和v-else一起使用。