个人自学前端41-Vue17-混入mixins杂谈

目录

一. 混入mixins

mixins（混入）是一个js对象，可以包含任意组件选项，如data、components、methods 、created、computed等。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。
优点 => 提高代码的重用性

二. 特点

  1. 方法和参数在各组件中不共享，虽然组件调用了mixins并将其属性合并到自身组件中来了，但是其属性只会被当前组件所识别并不会被共享，也就是其他组件无法从当前组件中获取到mixins中的数据和方法
  2. 当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。
    • 值为对象(components、methods 、computed、data)的选项，混入组件时选项会被合并，键冲突时优先组件，组件中的键会覆盖混入对象的。（组件优先）
    • 值为函数(created、mounted)的选项，混入组件时选项会被合并调用，混合对象里的钩子函数在组件里的钩子函数之前调用。（先输出混入的生命周期）

三. 全局混入和局部混入生命周期区别

image

  1. 全局混入和局部混入都会在beforeCreate和created之间，先全局后局部
  2. 键冲突时覆盖混入对象从大到小 => 组件 > 局部 > 全局

四. 混入与vuex的区别

vuex

用来做状态管理的，里面定义的变量在每个组件中均可以使用和修改，在任一组件中修改此变量的值之后，其他组件中此变量的值也会随之修改。

混入

可以定义共用的变量，在每个组件中使用，引入组件中之后，各个变量是相互独立的，值的修改在组件中不会相互影响。

五.混入与公共组件的区别

组件

在父组件中引入组件，相当于在父组件中给出一片独立的空间供子组件使用，然后根据props来传值，但本质上两者是相对独立的。

混入

在引入组件之后与组件中的对象和方法进行合并，相当于扩展了父组件的对象与方法，可以理解为形成了一个新的组件。

六. 代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id='app'>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const mixin1 = {
            data() {
                return {
                    test: 11
                }
            },
            created() {
                this.ce();
            },
            methods: {
                ce(){
                    console.log('局部混入',this.test)
                }
            }
        }
        const box = {
            template:`
                <div>
                    <h2>box组件</h2>
                    <h3>爸爸我们的金库里现在有{{money}}块钱</h3>
                    <input placehoder='存钱金额' v-model='num' />
                    <button @click='$emit("setmoney",num)'>儿子往金库里存钱</button>
                </div>
            `,
            data(){
                // 当前组件输入的金额
                return {
                    num: 0,
                    test: 22
                }
            },
            mixins: [mixin1],
            props:['money'],
            methods:{
                ce() {
                    console.log('局部混入',this.test)
                }
            },
            beforeCreate() {
                console.log('beforeCreate组件box')
            },
            created() {
                console.log('created组件box')
            },
            beforeMount() {
                console.log('beforeMount组件box')
            },
            mounted() {
                console.log('mounted组件box')
            },
            beforeUpdate() {
                console.log('beforeUpdate组件box')
            },
            updated() {
                console.log('updated组件box')
            }
        }
        const App = {
            template:`
                <div>
                    <h2>App组件</h2>
                    <h3>儿子我们的金库里现在有{{money}}块钱</h3>
                    <input placehoder='存钱金额' v-model='num' />
                    <button @click='setMoney(num)'>爸爸往金库里存钱</button>
                    <hr />
                    <box :money='money' @setmoney='setMoney' />
                </div>
            `,
            components:{box},
            mixins: [mixin1],
            data(){
                return {money:100,num:0}
            },
            methods:{
                // 存钱
                setMoney(val){
                    // 总金额
                    this.money += val*1
                },
            },
            beforeCreate() {
                console.log('beforeCreate组件App')
            },
            created() {
                console.log('created组件App')
            },
            beforeMount() {
                console.log('beforeMount组件App')
            },
            mounted() {
                console.log('mounted组件App')
            },
            beforeUpdate() {
                console.log('beforeUpdate组件App')
            },
            updated() {
                console.log('updated组件App')
            }
        }
        Vue.mixin({
            data() {
                return {
                    test: 0
                }
            },
            created() {
                console.log('全局混入',this.test)
            }
        })
        new Vue({
            el:'#app',
            render:h => h(App),
            beforeCreate() {
                console.log('beforeCreate')
            },
            created() {
                console.log('created')
            },
            beforeMount() {
                console.log('beforeMount')
            },
            mounted() {
                console.log('mounted')
            },
            beforeUpdate() {
                console.log('beforeUpdate')
            },
            updated() {
                console.log('updated')
            }
        })
    </script>
</body>
</html>
posted @ 2021-10-31 21:59  暗鸦08  阅读(86)  评论(0)    收藏  举报