vue高级特性

vue 高级特性包含以下几种

1. 自定义 v-model

2. $nextTick

3. slot

4. 动态、异步组件

5. keep-alive

6. mixin

自定义 v-model

双向数据绑定 v-model 的实现原理

index.vue 父组件

//index.vue 父组件
<p>{{name}}</p>
<CustVModel v-model="name"/>

<script>
export default {
   components: {
     CustomVModel
   },
   data() {
     return {
       name: '张三'
     }
   }
}
</script>

CustomVModel.vue 子组件

// CustomVModel.vue 子组件
<input type="text" :value="test"
@input="$emit('change',$event.target.value)" >
<script>
export default {
    model: {
       props:'test'        //对应 props test
       event: 'change'
    },
    props: {
        test: String,
        default() {
           return ''
        }
    }
}
</script>

1. 上面的input 使用了 :value 而不是 v-model

2. 上面的change 和model.event 要对应起来

3. test 属性也要对应起来

$nextTick

因为Vue 是异步渲染的，data改变之后，DOM 不会立刻渲染，而$nextTick 会再DOM 渲染之后触发，以获取最新的DOM节点

页面渲染时，会将data的修改做整合，多次 data 修改只会渲染一次

slot

基本使用：让父组件往子组件里插入一段内容，若不插入 则显示默认内容

作用域插槽：

子组件：

父组件：

具名插槽：就是名字一一对应，没有设置名字的就是默认插槽

动态、异步组件

动态组件：

:is = "component-name" 用法

需要根据数据，动态渲染的场景，即组件类型不确定的时候使用

异步组件：需要时就加载，不需要时就不用加载

何时要使用异步组件？

• 加载大组件

• 路由异步加载（多路由、切换路由）

keep-alive

用于 缓存组件，频繁切换，不需要重复渲染的组件，Vue常见性能优化方法之一

何时需要使用keep-alive

1. 缓存组件，不需要重复渲染

2. 多个静态tab页的切换

3. 优化性能

mixin

• 多个组件有相同的逻辑，抽离出来

• mixin 并不是完美的解决方案，会有一些问题

• vue3提出的 Composition API旨在解决这些问题

将部分逻辑抽离，然后再和不同的页面进行混合, mixin.js 就是抽离出来的公共逻辑

// mixin.js
export default {
    data() {
        return {
            city: '北京'
        }
    },
    methods: {
        showName() {
            // eslint-disable-next-line
            console.log(this.name)
        }
    },
    mounted() {
        // eslint-disable-next-line
        console.log('mixin mounted', this.name)
    }
}

// MixinDemo.vue
<template>
    <div>
        <p>{{name}} {{major}} {{city}}</p>
        <button @click="showName">显示姓名</button>
    </div>
</template>

<script>
import myMixin from './mixin'

export default {
    mixins: [myMixin], // 可以添加多个，会自动合并起来
    data() {
        return {
            name: '双越',
            major: 'web 前端'
        }
    },
    methods: {
    },
    mounted() {
        // eslint-disable-next-line
        console.log('component mounted', this.name)
    }
}
</script>

添加了 mixins: [myMixin], 就可以将两个文件的逻辑合并起来，运行文件的时候，showName以及console.log的内容都能显示出来

mixin 的问题：

1. 变量来源不明确，不利于阅读

2. 多 mixin 可能会造成命名冲突

3. mixin 和组件可能出现多对多的关系，复杂度较高