vue常用配置项

第一部分watch和computed计算属性

区别：

watch适合处理的场景是，侦听一个数的变化，当该数据变化，来处理其他与之相关数据的变化
computed适合处理的场景是，获得一个值或者结果，该结果受其他的依赖的影响。（一个数据受多个数据影响），计算属性是基于响应式的依赖进行缓存，而只有定义在data中的参数才是响应式的，这个得特别注意

计算属性配置项
注意点：
  // 只有定义在data中的数据才拥有响应式
  // 计算属性只有在data中获取到初始数据才有意义
computed: {
 //自定义属性值
isAll: {
 set(val) {
    // isAll的值被事件触发发生改变时, 传入改变后的值val
   },
  get() {
        return (计算原始数据，发生改变之后就是isAll的初始值)
      },
    },
  },

监听器配置项
// 深度监听和立刻执行(不用写this即可获取到值：data里面的变量)
// 监听器只能起到监听数据变化的效果，不能改写数据
watch: {
  //list是要监听的对象
  list: {
   immediate: true, // 立即执行
   deep: true, // 深度监听复杂类型内变化
  handler(newVal, oldVal) {
     // newVal是改变后的状态
     // oldVal是改变后的状态
        console.log(newVal);
      },
    },
  },

第二部分props配置项校验（父传子）

基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)

props:{
  // 类型校验Array，String
  type:String,
   // 是否必传：true为必传，false或者不写为非必传
   required:true,
   //不传值，就会有下面默认值 如果是引用类型写函数
   // 如果是值类型 ：default: ' '
   default:function(){
      return []
   },
   validator:function(val){
     // 这个值必须匹配下列字符串中的一个
     return ['success', 'warning', 'danger'].indexOf(value) !== -1
   }
  }

第三部分components子组件注册

 使用场景：在父组件中导入子组件的时候调用

<template>
 <div>
   <!-- 使用子组件 -->
   <userName />
 </div>
</template>
<script>
// 导入组件
import userName from "./component/userName.vue";
export default {
  //components子组件注册配置项
  components: {
  // 注册组件
  userName,
   },
 };
</script>

第四部分生命周期函数

 八个生命周期函数

// 1. 创建前：实例初始化前
注意：此时无法获取data中的数据、methods中的方法。
beforeCreate() {},
// 2. 创建后：实例初始化后
// 此时能查找到组件里的变量,可以调用methods中的方法、改变data中的数据。
使用场景：发送请求获取数据
created() {},
// 3.挂载到真实的网页之前
beforeMount() {},
// 4. 挂载后=> 挂载到真实的网页上
说明：此时，vue实例已经挂载到页面中，可以获取el中的DOM元素，进行DOM操作。
mounted() {},
// 5. 数据更新：页面更新前
beforeUpdate() {},
// 6. 数据更新：页面更新后
说明：组件DOM已经更新，所以你现在可以执行依赖DOM的操作。
updated() {},
// 7. 组件销毁前
使用场景：实例销毁之前，执行清理任务，比如：清除定时器等。
beforeDestroy() {// (清除定时器 / 解绑js定义的事件)
},
destroyed() {
// 8. 销毁后
// (清除定时器 / 解绑js定义的事件)
}

生命周期函数在子组件和父组件运行情况如下

父组件初始化前beforeCreate =>
父组件初始化后created =>
父组件挂载到真实的网页之前beforeMount =>
子组件初始化前beforeCreate =>
子组件初始化后created =>
子组件挂载到真实的网页之前beforeMount =>
子组件挂载到真实的网页上mounted=>
父组件挂载到真实的网页上mounted=>

 更新过程

1.父组件 beforeUpdate
2.子组件 beforeUpdate
3.子组件 updated
4.父组件 updated

销毁过程：

1.父组件 beforeDestroy
2.子组件 beforeDestroy
3.子组件 destroyed
4.父组件 destoryed

第五部分methods（注意点）

我们可以使用 methods 属性给 Vue 定义方法

<template>
 <div>
  <button v-on:click="fn($event)">点我第一种没传参获取e</button>
  <button v-on:click="fn1(1, $event)">点我第二种传参获取e</button>
 </div>
</template>
<script>
export default {
 methods: {
   // 第一种没有传参情况下获取$event
   fn(e) {
    console.log(e);
    console.log(this);
  },
   // 第二种传参情况下获取$event
   fn1(num, e) {
    console.log(e);
    console.log(this);
   },
 },
};
</script>

 第六部分自定义配置项directives

自动获取焦点

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

<script>
export default {
 // 注册
 directives: {
   focus: { // 自定义指令名
     inserted(el){ // 固定配置项 - 当指令插入到标签自动触发此函数
         el.focus()
     }
    }
  }
}
</script>

 需求: 定义color指令-传入一个颜色, 给标签设置文字颜色

<template>
  <div id="app">
    <p v-color="theColor" @click="fn">我是input框:<input type="text" v-focus></p>
  </div>
</template>
<script>
// 需求1：本来p标签是红色，点击之后变成蓝色。
// 需求2：input刷新即获取到焦点
export default {
  data(){
    return{
      theColor:'red'
    }
  },
  name: 'App',
  methods:{
    fn(){
      this.theColor='green'
    }
  },
  directives:{
   // 获取焦点
   focus:{
     inserted(el){
       console.log(el)
       el.focus()
     }
   },
   // 点击变色
    'color':{
      inserted(el,binding){
      el.style.color=binding.value
     },
     update(el,binding){
     el.style.color=binding.value
    }
   },
 }
}
</script>