vue高级用法

Posted 2023-03-25

参考技术A 安装 Vue.js 插件。如果插件是一个对象，必须提供 install 方法。如果插件是一个函数，它会被作为 install 方法。install 方法调用时，会将 Vue 作为参数传入。

该方法需要在调用 new Vue() 之前被调用。

当 install 方法被同一个插件多次调用，插件将只会被安装一次。

通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成：

也可以传入一个可选的选项对象：

Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。

Vue.js 官方提供的一些插件 (例如 vue-router) 在检测到 Vue 是可访问的全局变量时会自动调用 Vue.use()。然而在像 CommonJS 这样的模块环境中，你应该始终显式地调用 Vue.use()：

我们开发插件对象, 需要给这个对象下暴露⼀个 install ⽅法。也就是说只要⼀个 对象 有 install ⽅法，同时它的第⼀个参数为 Vue 构造函数，第⼆个参数为⼀个 options，那么他就是⼀个合法的 Vue 插件。

可以使⽤插件做很多⾃动化的事情，某些情况下我们可以⽐ 组件化 能够做更多细粒度的封装。

创建 plugins.js 文件：

main.js中引入：

其他组件中直接使用：

混⼊ (mixin) 提供了⼀种⾮常灵活的⽅式，来分发 Vue 组件中的可复⽤功能。

⼀个混⼊对象可以包含任意组件选项。当组件使⽤混⼊对象时，所有混⼊对象的选项将被“混合”进⼊该组件本身的选项。
我们的 mixin 可以在组件级别和全局两种⽅式进⾏混⼊

当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。

比如，数据对象在内部会进行递归合并，并在发生冲突时以组件数据优先。

同名钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用。

值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象。两个对象键名冲突时，取组件对象的键值对。

注意：Vue.extend() 也使用同样的策略进行合并。

混入也可以进行全局注册。使用时格外小心！一旦使用全局混入，它将影响每一个之后创建的 Vue 实例。使用恰当时，这可以用来为自定义选项注入处理逻辑。

请谨慎使用全局混入，因为它会影响每个单独创建的 Vue 实例 (包括第三方组件)。大多数情况下，只应当应用于自定义选项，就像上面示例一样。推荐将其作为插件发布，以避免重复应用混入。

自定义选项将使用默认策略，即简单地覆盖已有值。如果想让自定义选项以自定义逻辑合并，可以向 Vue.config.optionMergeStrategies 添加一个函数：

对于多数值为对象的选项，可以使用与 methods 相同的合并策略：

可以在 Vuex 1.x 的混入策略里找到一个更高级的例子：

Vue中watch的高级用法

<template>
  <div>
      <input type="text" v-model="value">
  </div>
</template>

<script>
  export default 
    data() 
      return 
        value:null
      
    ,
    created()
      this.test()
    ,
    methods: 
      test()
        console.log("第一个加载")
      
    ,
    watch: 
      value(val)
        this.test()
      
      
    ,  
  
</script>

上面的代码的效果是，页面第一次加载需要调用test方法，每次输入都要调用test方法

可以使用handler方法和immediate属性进行优化

immediate:true代表如果在 wacth 里声明了 test 之后，就会立即先去执行里面的handler方法，

如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

    watch: 
      value:
        handler:‘test‘,
        immediate:true
      ,
      
    ,  

这样可以每次输入调用test方法，当然要是你需要每次拿到值也可以这样写

    watch: 
      value:
        //handler:‘test‘,
        handler(val)
          console.log(val)
        ,
        immediate:true
      ,
      
    ,  

 

deep的用法

watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听，比如我们 data 里有一个obj属性：

<template>
  <div>
      <input type="text" v-model="obj.a">
  </div>
</template>

<script>
  export default 
    data() 
      return 
        value:null,
        obj:
          a:null
        
      
    ,
    created()

    ,
    methods: 
      test()
        console.log("第一个加载")
      
    ,
    watch: 
      obj:
         handler(val)
          console.log(val)
        ,
        immediate:true,
      ,
      
    ,  
  
</script>

 

当我们在在输入框中输入数据视图改变obj.a的值时，我们发现是无效的

这时候可以使用deep

    watch: 
      obj:
         handler(val)
          console.log(val)
        ,
        immediate:true,
        deep:true
      

 

也可以使用 字符串

    watch: 
      ‘obj.a‘:
         handler(val)
          console.log(val)
        ,
        immediate:true,
        deep:true
      ,