VUE学习（持续更新ing）

//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:

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

条件渲染

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

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

<template>只能配合v-if 使用，不能使用v-show

列表渲染：

v-for指令：

用于展示列表数据

语法：

v-for=“（item,index）in xxx ” :key ="id"

vue监视数据的原理：

vue会监视data中所有层次的数据。
如何监测对象中的数据？

通过setter实现监视，且要在new Vue时就传入要检测的数据。

(1).对象中后追加的属性，vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下API:
```
Vue.set(target, propertyName/index, value)

//或 
vm.$set(target, propertyName/index, value)
```
如何监测数组中的数据

通过包裹数组更新元素的方法实现，本质就是做了两件事：

（1）、调用原生对应方法对数组进行更新。

（2）、重新解析模板，进而更新页面。

在vue修改数组中某个元素一定要用如下方法：

//1.使用这些API :
 push()、pop()、shift()、unshift()、splice()、sort()、reverse()

2.
Vue.set()
//或
vm.$set()

特别注意：Vue.set() 和 vm.$set() 不能给 vm 或者 vm的根数据对象添加属性！

收集表单数据

<input type="checkbox"/>

1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是bool值）

2.配置input的value属性：

v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是bool值）
v-model的初始值是数组，那么收集到的就是value组成的数组。

备注：v-model的三个修饰符：

lazy：失去焦点时再收集数据
number：输入字符串转为有效的数字
trim：去除首尾空格

v-cloak指令（没有值）：

本质是一个特殊属性，vue实例创建完毕并接管容器后，会删掉v-cloak属性。
使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题

v-once指令：

v-once所在节点在初次动态渲染后，就视为静态内容了。
以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

v-pre指令：

跳过其所在节点的编译过程。
可以利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

自定义指令：

Vue2生命周期：

ref属性：

被用来给元素或子组件注册引用信息（id的替代者）
应用在html标签上获取到的是真实dom元素，应用在组件标签上是组件实例对象
使用方法：

打标识：

<h1 ref="xxx"></h1> 或<School ref="xxx"/>

获取：

this.$refs.xxx

配置项props

传递数据：
```
<Demo name="xxx">
```
接收数据：

//a.只接收：
props:['name']

//b.限制类型接收：
props{

    name:string

}

//c.限制类型、限制必要性、指定默认值：
props:{

    name:{

        type:String,

        required:true,

        default:'李四'

}

}

PS：props是只读的，Vue底层会检测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

mixin混入

功能：可以把多个组件公用的配置提取成一个混入对象
使用方式：

//定义混合：

export const mix1={

    data（）{...},

    methods:{....}

}

//使用混入：

//a.全局混入：
Vue.mixin(mix1)

//b.局部混入：
mixins['mix1']

插件plugin

功能：用于增强vue
本质：包含install方法的一个对象，install的第一个参数就是vue，第二个以后参数是插件使用者传递的数据。
定义插件：

对象.install = function(Vue, options){

//添加全局指令

Vue.directive(...)

//配置全局混入

Vue.mixin(...)

//添加实例方法

Vue.prototype.$myMethod = function( ){...}

}

使用插件：
```
Vue.use()
```

scoped样式

作用：让样式在局部生效，防止冲突

写法：<style scoped>

消息订阅与发布（pubsub）

1,一种组件间通信的方式，适用于任意组件间通信。

2.使用步骤：

1.安装pubsub：

npm i pubsub-js

2.引入

import pubsub from ‘pubsub-js’

3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身

methods(){
    demo (data){...}
}
...
mounted(){
    this.pid = pubsub.subscribe('xxx',this.demo)  //订阅消息
}

4.提供数据：

pubsub.publish('xxx', data)

5.最好在beforeDestroy钩子中，用Pubsub.unsubscribe(pid)去取消订阅

nextTick

1.语法：

this.$nextTick(回调函数)

2.作用：在下一次DOM更新结束后执行其指定的回调

3.用法：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行

插槽slot

1.作用：让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件===>子组件

2.分类：

默认插槽
具名插槽
作用域插槽
1. 数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。（games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定）

3.使用方式：

/*默认插槽*/
//父组件中：
        <Category>
           <div>html结构1</div>
        </Category>
//子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot>插槽默认内容...</slot>
            </div>
        </template>

/*具名插槽*/
//父组件中：
        <Category>
            <template slot="center">
              <div>html结构1</div>
            </template>

            <template v-slot:footer>
               <div>html结构2</div>
            </template>
        </Category>
//子组件中：
        <template>
            <div>
               <!-- 定义插槽 -->
               <slot name="center">插槽默认内容...</slot>
               <slot name="footer">插槽默认内容...</slot>
            </div>
        </template>


/*作用域插槽*/
//父组件中：
        <Category>
            <template scope="scopeData">
                <!-- 生成的是ul列表 -->
                <ul>
                    <li v-for="g in scopeData.games" :key="g">{{g}}</li>
                </ul>
            </template>
        </Category>

        <Category>
            <template slot-scope="scopeData">
                <!-- 生成的是h4标题 -->
                <h4 v-for="g in scopeData.games" :key="g">{{g}}</h4>
            </template>
        </Category>
//子组件中：
        <template>
            <div>
                <slot :games="games"></slot>
            </div>
        </template>
        
        <script>
            export default {
                name:'Category',
                props:['title'],
                //数据在子组件自身
                data() {
                    return {
                        games:['红色警戒','穿越火线','劲舞团','超级玛丽']
                    }
                },
            }
        </script>

VUE3

reactive函数

作用：定义一个对象类型的响应式数据（基本类型使用ref）
语法：const p = reactive({})接收一个对象/数组，返回一个代理对象（Proxy实例对象）
reactive定义的响应式数据是深层次的
内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作

setup注意点

setup执行时机
- 在beforeCreate之前执行一次，this是undefined。
setup的参数
- props：值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。
- context：上下文对象
  - attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs.
  - slots：收到的插槽内容，相当于this.$slots.
  - emit：分发自定义事件的函数，相当于this.$emit.

computed函数

与vue2中computed配置功能一致

写法

import {computed} from 'vue'

setup(){
    let person = reactive({
        firstName : '张'
        lastName : '三'
    })
    
    //计算属性简写（不考虑修改）
    let person.fullName = computed(()=>{
        return person.firstName + '-' + person.lastName
    })
    //计算属性完整
    let person.fullName = computed({
        get(){
            return person.firstName + '-' + person.lastName
        }
        set(value){
            let nameArr = value.split('-')
            person.firstName = nameArr[0]
            person.lastName = nameArr[1]
        }
    })
    return {
        person
    }

}

Watch函数

与Vue2.x中watch配置功能一致

两个小“坑”：

监视reactive定义的响应式数据时：oldValue无法正确获取、强制开启了深度监视（deep配置失效）。
监视reactive定义的响应式数据中某个属性时：deep配置有效。

//情况一：监视ref定义的响应式数据
watch(sum,(newValue,oldValue)=>{
    console.log('sum变化了',newValue,oldValue)
},{immediate:true})

//情况二：监视多个ref定义的响应式数据
watch([sum,msg],(newValue,oldValue)=>{
    console.log('sum或msg变化了',newValue,oldValue)
}) 

/* 情况三：监视reactive定义的响应式数据
            若watch监视的是reactive定义的响应式数据，则无法正确获得oldValue！！
            若watch监视的是reactive定义的响应式数据，则强制开启了深度监视 
*/
watch(person,(newValue,oldValue)=>{
    console.log('person变化了',newValue,oldValue)
},{immediate:true,deep:false}) //此处的deep配置不再奏效

//情况四：监视reactive定义的响应式数据中的某个属性
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true}) 

//情况五：监视reactive定义的响应式数据中的某些属性
watch([()=>person.job,()=>person.name],(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{immediate:true,deep:true})

//特殊情况
watch(()=>person.job,(newValue,oldValue)=>{
    console.log('person的job变化了',newValue,oldValue)
},{deep:true}) //此处由于监视的是reactive素定义的对象中的某个属性，所以deep配置有效

watchEffec函数

不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。

watchEffect有点像computed：

但computed注重的计算出来的值（回调函数的返回值），所以必须要写返回值。
而watchEffect更注重的是过程（回调函数的函数体），所以不用写返回值。

//watchEffect所指定的回调中用到的数据只要发生变化，则直接重新执行回调。
watchEffect(()=>{
    const x1 = sum.value
    const x2 = person.age
    console.log('watchEffect配置的回调执行了')
})

VUE3生命周期

Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
- beforeDestroy改名为 beforeUnmount
- destroyed改名为 unmounted
Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
- beforeCreate===>setup()
- created=======>setup()
- beforeMount ===>onBeforeMount
- mounted=======>onMounted
- beforeUpdate===>onBeforeUpdate
- updated =======>onUpdated
- beforeUnmount ==>onBeforeUnmount
- unmounted =====>onUnmounted

自定义hook函数

本质是一个函数，把setup函数中使用的Composition API进行了封装。
类似于vue2.x中的mixin。
优势: 复用代码。

toRef

作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
语法：const name = toRef(person,'name')
应用: 要将响应式对象中的某个属性单独提供给外部使用时。

扩展：toRefs 与toRef功能一致，但可以批量创建多个 ref 对象，语法：toRefs(person)

shallowReactive 与 shallowRef

shallowReactive：只处理对象最外层属性的响应式（浅响应式）。
shallowRef：只处理基本数据类型的响应式, 不进行对象的响应式处理。
什么时候使用?
- 如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。
- 如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。

readonly 与 shallowReadonly

readonly: 让一个响应式数据变为只读的（深只读）。
shallowReadonly：让一个响应式数据变为只读的（浅只读）。
应用场景: 不希望数据被修改时。

toRaw 与 markRaw

toRaw：
- 作用：将一个由reactive生成的响应式对象转为普通对象。
- 使用场景：用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。
markRaw：
- 作用：标记一个对象，使其永远不会再成为响应式对象。
- 应用场景:
  1. 有些值不应被设置为响应式的，例如复杂的第三方类库等。
  2. 当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

customRef

作用：创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

实现防抖效果：

<template>
    <input type="text" v-model="keyword">
    <h3>{{keyword}}</h3>
</template>

<script>
    import {ref,customRef} from 'vue'
    export default {
        name:'Demo',
        setup(){
            // let keyword = ref('hello') //使用Vue准备好的内置ref
            //自定义一个myRef
            function myRef(value,delay){
                let timer
                //通过customRef去实现自定义
                return customRef((track,trigger)=>{
                    return{
                        get(){
                            track() //告诉Vue这个value值是需要被“追踪”的
                            return value
                        },
                        set(newValue){
                            clearTimeout(timer)
                            timer = setTimeout(()=>{
                                value = newValue
                                trigger() //告诉Vue去更新界面
                            },delay)
                        }
                    }
                })
            }
            let keyword = myRef('hello',500) //使用程序员自定义的ref
            return {
                keyword
            }
        }
    }
</script>

provide 与 inject

作用：实现祖与后代组件间通信
套路：父组件有一个 provide 选项来提供数据，后代组件有一个 inject 选项来开始使用这些数据

具体写法：

祖组件中：

setup(){
    ......
    let car = reactive({name:'奔驰',price:'40万'})
    provide('car',car)
    ......
}

后代组件中：

setup(props,context){
    ......
    const car = inject('car')
    return {car}
    ......
}

响应式数据的判断

isRef: 检查一个值是否为一个 ref 对象
isReactive: 检查一个对象是否是由 reactive 创建的响应式代理
isReadonly: 检查一个对象是否是由 readonly 创建的只读代理
isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

Fragment

在Vue2中: 组件必须有一个根标签
在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
好处: 减少标签层级, 减小内存占用

Teleport

Teleport 是一种能够将我们的组件html结构移动到指定位置的技术。

<teleport to="移动位置">
    <div v-if="isShow" class="mask">
        <div class="dialog">
            <h3>我是一个弹窗</h3>
            <button @click="isShow = false">关闭弹窗</button>
        </div>
    </div>
</teleport>

Suspense

等待异步组件时渲染一些额外内容，让应用有更好的用户体验

使用步骤：

异步引入组件

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))

使用Suspense包裹组件，并配置好default 与 fallback

<template>
    <div class="app">
        <h3>我是App组件</h3>
        <Suspense>
            <template v-slot:default>
                <Child/>
            </template>
            <template v-slot:fallback>
                <h3>加载中.....</h3>
            </template>
        </Suspense>
    </div>
</template>