Vue实例 中的常用配置项

Posted 2021-02-05 lihuijuan

创建Vue实例时，使用 new Vue ({//配置项}) 或者 组件定义中 export default {//配置项}，所有的Vue组件都是Vue实例，并且接受相同的选项对象（一些根实例特有的选项除外）

如：

new Vue({
//选项配置

  el: ‘#app‘,
  components: { App },
  template: ‘<App/>‘
})

配置项一共可以分为六大类：数据、DOM、生命周期钩子、资源、组合、其他

一、数据

（1）data：Vue根实例或者当前组件上的数据对象，类型可能是纯粹的object形式，但当为组件上的数据时，必须是function类型

当是Vue根实例上时：

new Vue ({
    data: {
        num: 3
    }
})

当是组件上的数据时：

export default {
    data: function () {
        return {
            num: 3
        }
    }
}

（2）computed：计算属性，根据data中的数据需要动态计算的属性。在new根实例和组件中使用的方法和含义都一样，不一一举例（以下所有配置不提名都代表一样）

new Vue({
   data:  {
    a: 1
    } ,
    computed: {
        dbA: function(){
            return this.a * 2;
        }
    }
})

如上例中，计算属性dbA是由data数据中的属性得到，使用时和数据属性a是一样的，没有差距

（3）watch：侦听器，监视data中属性的变化，来做出反应

new Vue({
   data:  {
    a: 1,
    dbA:2
    },
    watch: {
        a: function(val,oldVal){//监听a的变化，val为变化后的值，oldVal为变化之前的值
            this.dbA = val *2
        }
    }
})

和计算属性进行对比可以发现，当有一些数据需要随着其他数据变化而变化时，计算属性和侦听器有时均可以实现，要优选计算属性，避免侦听器的滥用！但是当需要在数据变化时执行异步操作或者开销较大的操作时，要是用侦听器

（4）methods：方法的集合，用到的所有方法，定义在其中

new Vue({
   data:  {
    a: 1
    } ,
    methods: {
        clickBtn: function(){ 
             this.a++;
        }
    }
})

(5)props:接受从父组件传过来的数据

在父组件中，使用子组件时：<child v-bind:data1="data1"></child>，通过v-bind把子组件中所需要的数据传递给子组件，在子组件中通过props来接受

子组件中props的格式一般为为：props:[‘data1‘,‘data2‘,....]或者是 props:{data1:data1Type,data2:data2Type,...}

export default {
  data () {
    return {
      show: true
    }
  },
  props: {
    lists: Array
  }
}

（6）porpsData：只能用在new创建的根实例中，主要作用是方便测试

二：DOM

（1）el：只有在new创建的根实例中才有，提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标，可以是一个CSS选择器也可以是一个htmlElement实例，一般选用CSS选择器中的id来标识

（2）template：一个字符串模板作为Vue实例的标识使用

new Vue({
  el: ‘#app‘,
  components: { App },
  template: ‘<App/>‘
})

（3）render：字符串模板的代替方案，允许你发挥 javascript 最大的编程能力。该渲染函数接收一个 createElement 方法作为第一个参数用来创建 VNode。

Vue 选项中的 render 函数若存在，则 Vue 构造函数不会从 template 选项或通过 el 选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

 （4）renderError：当render函数遭遇错误时，提供的另外一种渲染输出

三：生命周期钩子

生命周期钩子即生命周期回调函数,常用的分为以下三种：

（1）初始化阶段（执行一次）：

• beforeCreate(){}，
• created(){},
• beforeMount(){},
• mounted(){},//初始化完成后触发，一般在该回调函数中发送ajax请求或者启动定时器等异步任务

（2）更新阶段（执行0~n次）：

• beforeUpdated(){},
• updated(){}

（3）死亡阶段（执行1次）：

• beforeDestroy(){},//做收尾工作，如：清除定时器
• destroyed(){}

 四：资源

（1）components：注册vue实例中可用的组件，是object类型

<template>
  <div class="container">
    <!--使用组件-->
    <vue-header/>
    <Menu/>
  </div>

</template>

<script>
//引入组件
import VueHeader from ‘./components/Header‘
import Menu from ‘./components/Menu‘
export default{
  components: { //注册组件
    VueHeader,
    Menu
  }
}
</script>

（2）directives：注册（自定义）局部指令，自定义的指令只有在当前vue实例中有效

语法：directives:{"diretiveName":function(){}}

（3）filters:定义本地过滤器

filters: {
  capitalize: function (value) {
    if (!value) return ‘‘
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
//除了上面在一个组件的选项中定义本地的过滤器，也可在在创建 Vue 实例之前全局定义过滤器
Vue.filter(‘capitalize‘, function (value) {
  if (!value) return ‘‘
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>