构造选项是什么

我们在学习Vue的时候，会经常看到这样一段代码

const vm = new vue(options)

其中，new vue()实例中，vue封装了对视图的所有操作，包括数据读写、事件绑定、DOM更新。其中，new Vue接受的属性，就叫做构造属性（options）

构造选项的五类属性

数据

data：数据
props：属性
propsData：选项/数据
computed：被计算出来的
methods：计算方法
- 方法是属于面向对象概念，我们只在有对象的时候说方法，方法前面一定有一个对象，因为方法是依附于一个对象的。函数属于数学概念，我们在数学中叫函数
watch：观察
- 如果希望在别的地方通过观察有哪些变化从而做一些事情的时候，就用watch

DOM

el：容器、挂载点
template：HTML内容（完整版用的）
render：渲染（非完整版用的）

生命周期钩子（指元素生老病死的周期中可以切入的点）

beforeCreate：实例出现在内存前
created：实例出现在内存后
beforeMount：实例出现在页面前
mounted：实例出现在页面之后
beforeUpdate：实例更新前
updated：实例更新后
activated：实例被 keep-alive 缓存的组件激活前
deactivated：实例被 keep-alive 缓存的组件激活后
beforeDestroy：实例消亡前
destroyed：实例消亡后

资源

directives：指令
filters：过滤
components：组件。如果要在文件中引入另一个Vue文件，就需要用组件

组合

parent：父级的意思，基本用不到
mixins：混入
extends：扩展
provide：提供
inject：注入

其中加粗的知识需要着重学习

el/mount挂载点

以下代码以vue完整版为例

所谓挂载就是将tempalte中的代码放进某个容器，假如该容器又一个id，那么该id极为挂载点。

new Vue({
  template:`<div>hello word</div>`,
  el:'#app',
})

以上代码就表示template被挂在到'#app'上，'#app'会被替换。

还有一种写法

new Vue({
  template:`<div>该文本被挂载到挂载点上</div>`,
}).$mount('#app')

通过mount进行链式调用和直接声明挂载点的效果是一样的。

data内部数据

data表示内部数据，它可以替换掉内部template中占位符的内容。

new Vue({
  data:{n:0},
  //对象
  template:`<div>{{n}}</div>`,
}).$mount('#app')

new Vue({
  data(){
    return {n:0}
  },
  //函数
  template:`<div>{{n}}</div>`,
}).$mount('#app')

我们可以看到，data可以写成对象形式，也可以写成函数形式。但是，在一般我们优先使用函数形式。因为，如果写成对象形式，如果我们需要多次引用渲染，那么由于对象在内存中是以传址的形式被引用的，会造成变量的污染。但如果写成函数的形式，每次被引用时，运行函数生成变量，那么就不存在污染的情况，因为每个变量都是新的，互相没有关系。

props外部数据

data表示内部数据，在实例内部可调用，但想调用外部的数据，需要在外部使用props传入。

//往要传入的组件上写明传入的内容
import App1 from './components/app1.vue'

new Vue({
  components:{App1},
  template: `
    <section>
      <App1 message="hello props"/>
      //写上内容
    </section>
  `
,
}).$mount('#app')

//组件内部接受props ，并使用
<template>
  <section>
    {{message}}
  </section>
</template>

<script>
  export default {
    props:['message']
  }
</script>

如果要传变量，只需在message前面加上 : .即:message。如果，将变量n传入组件，组件内对变量进行修改，不会影响到外部的n 如果，将变量n和方法fn一同传入，在组件内调用fn，那么n在内外部会同时更新。（因为实际上内部fn调用时，改变的是外部的n，而决定内部n的又是外部的n）

methods方法

在vue中，我们的方法统一写在method对象内部。然后就可以直接在template中调用。

new Vue({
  data() {
    return {
      n: 0,
      array: [1, 2, 3, 4, 5, 6, 7, 8]
    }
  },

  template: `
    <section>
      <div>{{n}}</div>
      <div>{{arrayFilter(array)}}</div>
    </section>
  `,

  methods: {
    arrayFilter(arr) {
      return arr.filter(item => item % 2 === 0)
    }
  }
}).$mount('#app')

method 中的方法，有一个特性，就是每次调用，视图中的所有涉及method的数据都会被更新一次。

new Vue({
  data() {
    return {
      n: 0,
      array: [1, 2, 3, 4, 5, 6, 7, 8]
    }
  },

  template: `
    <section>
      <div>{{n}}</div>
      <div>{{arrayFilter(array)}}</div>
      <button @click="add">+1</button>
    </section>
  `,

  methods: {
    arrayFilter(arr) {
      console.log('执行了')
      return arr.filter(item => item % 2 === 0)
    },
    add(){
      return this.n += 1
    }
  }
}).$mount('#app')

以此代码为例，每次点击按钮，array居然会被更新。

components 组件

组件与实例之间的区别，被用来调用的就称之为组件，否则就是实例。

components接受的参数和new vue是一样的

(建议组件名首字母使用大写，文件名使用小写)

组件的使用（vue写法）

//组件中
<template>
  <section>
    {{n}}
  </section>
</template>

<script>
  export default {
    data() {
      return {n: 0}
    }
  }
</script>

<style>

</style>
----------------------------------------------------

//js文件中
import App1 from './components/app1'
//引入组件

new Vue({
  template: `
    <App1/>
  `,
  //在视图中使用组件
  components:{
    <div>
       <app1/>
    </div>
  }
  //将组件放到对象中
}).$mount('#app')

组件的使用（js写法）

Vue.component('App1', {
  template: `
    <div>{{n}}</div>`,
  data() {
    return {n: 0}
  }
})

new Vue({
  template: `
<div>
 <app1/>
</div>
  `,
}).$mount('#app')

组件的使用（js + vue 写法）

new Vue({
  template: `
    <div>
      <App1/>
    </div>
  `,
  components: {
    'App1': {
      template:
          `
        <div>{{n}}</div>`,
      data() {
        return {n: 0}
      }
    }
  }
}).$mount('#app')

生命周期钩子

钩子我们可以理解为‘切入点’，生命周期钩子就是，生命周期不同时期的切入点，例如created即表示视图被创建后。

created created表示视图被创建后。

new Vue({
  data(){
    return { n : 0 }
  },
  template: `
    <div>
      <div>{{n}}</div>
    </div>
  `,
  created(){
    console.log('created')
  },
}).$mount('#app')

通过debugger我们可以发现，created被调用时，试图还未生成。

mounted 被挂载后，一旦被挂载就会被触发。

new Vue({
  data(){
    return { n : 0 }
  },
  template: `
      <div>{{n}}</div>
  `,
  mounted(){
    console.log('mounted')
  },
}).$mount('#app')

通过debugger我们可以发现，mounted被触发时，视图已经被挂载。

updated updated表示视图被更新后

new Vue({
  data(){
    return { n : 0 }
  },
  template: `
    <div>
      <div>{{n}}</div>
       <button @click="add">+1btn</button>
    </div>
  `,
  updated(){
    console.log('updated')
  },
  methods:{
    add(){return this.n+=1}
  }
}).$mount('#app')

destroyed destoryed：写在在组件内部，该组件从页面中消失/隐藏时就会触发

import App1 from './components/app1.vue'
new Vue({
  components:{App1},
  data() {
    return {
      visible: true,
    }
  },
  template: `
    <section>
      <button @click="toggle">Btn</button>
      <hr>
      <App1  v-if="visible === true"/>
    </section>
  `,
  methods: {
    toggle() {
      this.visible = !this.visible
    }
  }
,
}).$mount('#app')

//components中
<template>
  <section>
    {{n}}
  </section>
</template>

<script>
  export default {
    data() {
      return {n: 0}
    },
    destroyed(){
      console.log('消亡了')
    }
  }
</script>

以上部分内容转载自他人

Vue的基础构造选项