• VUE mixin 使用

    mixin 混入

    1. html>
    2.  
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>hello worldtitle>
    7.     <script src="https://unpkg.com/vue@next">script>
    8. head>
    9.  
    10. <body>
    11.     <div id="root">div>
    12. body>
    13. <script>
    14.     const MyMixin = {
    15.         data() {
    16.             return {
    17.                 number: 2,
    18.                 count: 3
    19.             }
    20.         }
    21.     }
    22.     const app = Vue.createApp({
    23.         data() {
    24.             return {
    25.                 number: 1
    26.             }
    27.         },
    28.         mixins: [MyMixin],
    29.         template: `
    30.         
      number:{{number}}
    31.         
      count:{{count}}
    32.         `
    33.     });
    34.  
    35.     app.mount('#root'); 
    36. script>
    37.  
    38. html>

    mixin 混入可以在组件内部缺少数据时，使用mixin内的数据代替。

    组件 data 优先级高于 mixin data 优先级

    上述代码中，count 使用了 mixin 内的数据，由于内部 number 已经被定义，vue 优先使用内部的数据，再使用 mixin 的数据。 

    2 mixin 生命周期优先级

    1. html>
    2.  
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>hello worldtitle>
    7.     <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js">script>
    8. head>
    9.  
    10. <body>
    11.     <div id="root">div>
    12. body>
    13. <script>
    14.     const MyMixin = {
    15.         created(){
    16.             console.log('mixin created')
    17.         }
    18.     }
    19.     const app = Vue.createApp({
    20.         mixins:[MyMixin],
    21.         created(){
    22.             console.log('app created')
    23.         }
    24.     });
    25.  
    26.     app.mount('#root'); 
    27. script>
    28.  
    29. html>

     mixin 中的生命周期函数和组件的生命周期函数都会执行，而且 mixin 中的优先级更高。

    效果如下：

    3 局部 mixin 和全局 mixin

    1. html>
    2.  
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>hello worldtitle>
    7.     <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js">script>
    8. head>
    9.  
    10. <body>
    11.     <div id="root">div>
    12. body>
    13. <script>
    14.     const MyMixin = {
    15.         data(){
    16.             return{
    17.                 number:123
    18.             }
    19.         }
    20.     }
    21.     const app = Vue.createApp({
    22.         mixins:[MyMixin],
    23.         template:``
    24.     });
    25.  
    26.     app.component("app",{
    27.         template:"
      number:{{number}}
      "
    28.     })
    29.     app.mount('#root'); 
    30. script>
    31.  
    32. html>

     使用 mixins:[myMixin] 是局部载入mixin的方式，子组件不能获得 mixins 的值

    运行结果如下：

    全局 mixin 写法：

    1. html>
    2.  
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>hello worldtitle>
    7.     <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js">script>
    8. head>
    9.  
    10. <body>
    11.     <div id="root">div>
    12. body>
    13. <script>
    14.  
    15.     const app = Vue.createApp({
    16.         template: ``
    17.     });
    18.  
    19.     app.mixin({
    20.         data() {
    21.             return {
    22.                 number: 123
    23.             }
    24.         }
    25.     })
    26.  
    27.     app.component("app", {
    28.         template: "
      number:{{number}}
      "
    29.     })
    30.     app.mount('#root'); 
    31. script>
    32.  
    33. html>

    使用 app.mixin 挂载就是全局，组件可以自由使用。

    效果如下：

    4 自定义属性的优先级

    1. html>
    2.  
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>hello worldtitle>
    7.     <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js">script>
    8. head>
    9.  
    10. <body>
    11.     <div id="root">div>
    12. body>
    13. <script>
    14.  
    15.     const myMixin = {
    16.         value: 1
    17.     }
    18.  
    19.     const app = Vue.createApp({
    20.         mixins: [myMixin],
    21.         value: 25,
    22.         template: `
      {{this.$options.value}}
      `
    23.     });
    24.     app.mount('#root'); 
    25. script>
    26.  
    27. html>

    vue 中，自定义属性就是直接写到vue下的属性，使用 this.$options.value 即可访问。

    自定义属性组件的优先级比 mixin 优先级高。

    结果如下：

    mixin总结：

    组件 data，methods优先级高于 mixin data，methods 优先级

    生命周期函数，先执行 mixin 里边的，再执行组件里边的

    自定义的属性，组件中的优先级高于 mixin 属性的优先级。

  • 相关阅读:
    Databend 开源周报第 118 期
    RealSenseSR300工程环境配置说明
    Kafka实现高性能消息队列分析
    JavaScript实现选择排序
    VMware添加Ubuntu虚拟机-Ubuntu系统的安装-物联网开发
    【web-渗透测试方法】(15.8)测试逻辑缺陷、共享主机漏洞、Web服务器漏洞、信息泄露
    笔试题-构建非二叉树，且非递归遍历-利用栈
    香橙派orangepi ubuntu 安装安装redis
    Java中高级面试题
    【Linux】基础IO —— 上
  • 原文地址：https://blog.csdn.net/nullccc/article/details/126210991