vue选项

一、在vue有两个选项，provide和inject，这两个选项是一起使用的，使用方法如下：

// 假如我有三个自定义组件像以下这样使用
// 在实际中不要像我这样给组件命名 
<test-component1>
    <test-component1>
        <test-component1>

        </test-componsent1>
    </test-componsent1>
</test-componsent1>


// 在最外层的TestComponent1组件中我添加一个provide选项
export default {
   name:"TestComponent1",
   data(){},
   provide:function(){
      return {
         name:"testName",
         age:21,
      }
   }
}


// 那么我可以直接在TestComponent2和TestComponent3组件中使用inject直接拿到
export default {
  name:"",
  data(){},
  // 注意这里不用像props那样需要传给子组件 
  // 只需要在父组件中使用provide即可  
  // 这样之后子孙组件可以直接使用inject来得到那些数据  
  // 不管隔了多少代
  inject:["name","age"],
  mounted(){
    console.log(this.name);  // testName
    console.log(this.age);   // 21
  }
}

二、mixins选项，用法如下

// 这是xiao.js文件  内容如下 以下是完成内容
export default { 
  watch:{},
  mounted(){
     console.log("mixin test");
  }
}


// 这是在另外一个文件  test.vue
<script>
  // 导入
  import mixin from "@/layout/xiao.js";
  export default {
     name:"Test"
     mixins:[mixin],
     mounted(){
       console.log("index test");
     },
     // 想上面那样学了之后  在这个组件挂载后会打印两次
     //  分别是 
     // mixin test
     // index test
     //  其他的选项都能像上面那样写  这里只是举例这样写的
  }
</script>

三、watch，简单的使用方法如下：

// test.vue
<script>
   export default {
     name:"Test",
     data(){
        return {
           num:1,
           obj:{
             name:"xiao",
             age:21,
           }
        }
     },
     watch:{
       "num":function(newValue,oldValue){
           // 当data中num数据被改变时才执行
        },
       "obj":{
            handle(newValue,oldValue){
              // 当对象obj里面的属性被改变时执行
              // 注意  如果不设置deep:true是不会监听的
              // 不想设置deep的话可以分开监听，如下样式
              // "obj.name":function(newValue,oldValue){}
              // "obj.age":function(newValue,oldValeu){}
              // 这样太麻烦了，这里数据较少看不出，假如有很多了，
              // 如果用到了ajax、axios等这些还有不确定因素怎么办？？
            },
            deep:true, // 这样设置就可以进行深度监听了

            // watch是在加载完成后如果数据发生变化了 才会触发
            // 如果想要一进来就执行 可以设置immediate为true来实现
            immediate:true,  
        }
     }
   }
</script>

四、computed，使用方法如下

// 都说到这了  我说一下我个人对watch、computed、methods的大致区别
// watch 主要是用于监听数据的变化  主要是在必要的时候用到 比如自适应等
// computed  主要是计算的，也是在要拿取数据需要计算的时候建议使用（下面详细说明）
// methods   主要就是写一些在开发中需要用到的方法，不管数据变没变都会从新计算



// test.vue
<template>
  <div>
    <p>{{ allName }}</p>
  </div>
</template>

<script>
   export default {
       // 个人习惯加name了  其实加不加都一样 加了更好
       name:"Test",
       data(){
           return {
              firstName:"xiao",
              lastName:"pang",
           }
       },
       computed:{
          allName(){
            // computed里面的方法可以像data里面的数据一样直接使用 
            // 在使用时可以不加括号也可以加
            // computed中如果firstName和lastName都不发生变化，name系统就不会再次计算了
            // 比较节约性能，这里数据少计算量小看不出来
            return this.firstName + this.lastName;
          },
          firstName:{
             // 在computed中存在get和set方法
             // 也能达到监听的效果  不过相对watch来说watch更好一点
             get(){},
             set(newValue){},
          }
       },
       // 有人会说了我methods同样可以做到啊，为啥不用他们呢
       // 主要就是只要你用来我methods里面的方法，不管变没变都会重新计算
   }
</script>

五、filter，用法如下

// filter：过滤
// test.vue

<template>
   <div>
       <p>{{ moneny | newMoneny }}</p>
       // 也可以这样使用  方法上上面一样
       <p :class="pClass | newClass"></p>
   </div>
</template>

<script>
   export default {
       name:"Test",
       data(){
         return {
           moneny: 2,
           pClass:"test",
         }
       },
       filter:{
          // 在很多时候我们想格式化一下显示的内容
          // 就像上面一样 本来只会输出 2 的，经过下面的处理会显示出：$2.00
          newMoneny(value){
             // 这里的value就是对应的money
             // 注意filter可以接连使用的，如：{{ moneny | moneny1 | moneny2 }}
             // 每一次的value就是对应前面新更新的内容
             return "$" + value.toFixed(2);
             // toFixed是原生的方法  四舍五入保留小数后几位 可以接收的参数是0-20位
             // 也可能是21位，有点忘记了，
             // 反正toFixed(num), num 是几就保留几位，不够就加0补，多了就四舍五入
          }
       }
   }
</script>

六、metaInfo，这是一个插件，下面介绍的是在vsCode编辑器里面的使用方法，如下：

// 注意：在vue项目中，meatInfo如果使用，也是一般在app.vue文件中使用（入口文件）
// 先下载： npm install --save vue-meat-info      可以不加 --save
// 在main.js文件里面挂载，分两步如下：
   // 1、引入    import metaInfo from "vue-meta.info"
   // 2、挂载    Vue.use(metaInfo);
// 这样就可以直接使用了


//app.vue
<script>
  import
  export default {
      name:"app",
      // 设置的内容和.html文件里面head标签里面的那些标签设置的差不多
      // 简单的移动端阻止缩放也可以在这里设置哦，
      // 这样只是换了一种写法，其他的都没变，
      metaInfo:{
          title: "设置标题",
		  meta:[{
			name:"",
			content:"",
		  }],
		  link:[{
			rel:"",
			href:"",
		  }],
      }
  }
</script>