0-3 Vue构造选项（Vue实例、内存图、options、入门属性）

1.Vue实例

• 实例就是对象
  比如：之前用jQuery去选择一个元素（如：#app），得到的是一个jQuery实例，这个实例封装了对那个元素的所有操作
• Vue也是一样的，用Vue做出一个Vue实例

2.内存图

• const vm = new Vue(options)
  一般前面的const vm可以省略，直接写：new Vue(options)
• 构造一个Vue的实例：new Vue(options)
  1.这个实例会根据你给的选项得出一个对象：vm
  2.vm封装了这个DOM对象，以及对应的所有操作（事件绑定、DOM读写、更新）
• 由于：对象.__proto__ === 构造函数.prototype
  则：vm.__proto__ === Vue.prototype
• 注释
  1.把Vue的实例命名为vm是尤雨溪的习惯，应该沿用
  2.vm对象封装了对视图的所有操作，包括：数据读写、事件绑定、DOM更新
  3.vm的构造函数式Vue，按照ES6的说法，vm所属的类是Vue
  （ES6的说法：构造函数是类）
  4.options是new Vue的参数，一般称之为选项或构造选项（构造函数后面的选项）
  5.五个问号，一一了解

一、options里面有什么

1.new Vue 有哪些选项（options）

• options的五类属性
  1.数据：data（数据）、props（属性）、propsData、computed（被计算出来的）、methods（方法）、watch（观察）
  2.DOM：el（容器）、template（HTML内容）、render（渲染）、renderError
  3.生命周期钩子：beforeCreate、created（生之后）、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed、errorCaptured
  （ed都是完成时）
  4.资源：directives（指令）、filters（过滤器）、components（组件）
  5.组合：parent（父母）、mixins（混入）、extends（扩展）、provide（提供）、inject（注入）
• methods
  方法和函数的区别
  1.方法：面向对象概念（方法前面一定有个对象，是依附于对象的）
  表达式：obj.sayhi()
  2.函数：数学概念
  表达式：sayhi()
• watch
  1.观察：盯着看，只要有变化就会通知上级
  2.如果希望在data变化的时候做某些事情，就用watch
• el
  容器：要用模块替换页面上的哪一块
• template、render
  两者只能二选一使用，一起使用必定有一个失效
  template：完整版使用，html字符串
  render：非完整版使用，渲染函数
• 生命周期钩子
  1.生命周期：就像人类的生老病死走一圈的时间。
  一个vue组件：在页面中插入一个div，然后监听它的事件，然后用户点击某个按钮的时候变化
  2.一个div的生命周期
  创建：createElement('div')–>挂载： append('#app') --> 更新：n:0=>1 --> 消失：destoryed
  
  3.钩子：可以切入的点
  如：火车的各个车厢之间链接处就是用钩子
  1.在一个关键点，如果能够给一个切入的机会，就称这个关键点为钩子
  如：生之后:(){取名字}
  4.Vue组件的五个关键点：
  created（创建）
  mounted（挂载）
  updated（更新）
  destoryed（消亡）
  五（略）
• filters
  过滤器：比较常用，如数组中找出大于5的数
  尽量不用这个，不太好用
• components
  组件：如果要在一个文件引用另一个Vue的文件，就使用组件（如：Demo.vue）

2.入门属性

• el ：组件或者实例的挂载点
  1.想要挂载到哪个节点，节点内容会被替换
  ——HTML中这个节点内容基本没机会展示，因为都会被替换
  2.与 $mount 有替换关系

new Vue({
  el:'#app',
  render:h=>h(Demo)
})
//等价于
new Vue({
  render:h=>h(Demo)
}).$mount('#app')

• data：内部数据
  1.支持对象和函数，优先用函数
  2.函数：还是return一个对象
  3.ES6提供了函数缩写语法：可以讲冒号和function删掉
  4.vue 的data有bug

new Vue({
  data:{
    n:0
  }
}).$mount('#app')

data(){
  return {
    n:0
  }
}

• data为什么优先使用函数？
  答：
  1.如果有一个Demo.vue组件，main.js引入了Demo
  2.而data是写在.vue结尾的文件（也就是Vue组件）中，那么这个data必须是函数
  3.因为：main.js中引入的Demo实际上是个对象
  4.Vue会自动把这个对象传给 new Vue
  5.如果有两次h(Demo)，那就相当于 new Vue(Demo) 两遍
  6.此时：如果data是对象，那么产生的两个new Vue(Demo)对象，而两个对象则共用一个内部数据data，其中一个改变了内容，那么另一个中的data也会改变内容
  7.而：如果data是函数，那么第一次在new Vue(Demo)的时候是调用data函数返回了一个Demo._data对象，第二次new Vue(Demo)的时候函数又返回了一个新Demo._data对象
  避免了两个对象共用一个data的问题

new Vue({
render:h=>h(X,[h(Demo),h(Demo)]) //new Vue(Demo)*2
})

• methods：方法
  事件处理函数或者普通函数
  1.如果出现报错：函数没有定义，则肯定是函数写在了methods外面
  2.methods可以代替filter，主动去模板调用
  3.methods有个特点：每次页面产生了改变都会里面的函数全部都会执行，即使和它无关的内容
  ——这就引出了computed

//事件处理函数
methods:{
  add(){
    this.n += 1
  }
}

//filter：普通函数，JS提供的函数，筛选偶数
template:`
{{array.filter(i=>i%2===0)}}
`
//等价于
  template:`
  {{filter()}}
  `,
  methods:{
    filter(){
      return this.array.filter(i=>i%2===0)
    }
  }

• components
  三种方法声明
  使用 Vue 组件，组件最好用大写，因为可能和HTML中的标签重名
  1.所有new Vue出来的vm都叫做：Vue对象或Vue实例，不能叫组件
  2.vm使用其他Vue实例的时候才叫组件
  3.创建组件的方法（优先使用法一）
  ——方法1：直接创建一个Demo.vue文件，这就是Vue组件，引入Demo之后在components中命名，就可以直接用，名字标签会被替换成Demo组件中的内容
  ——方法2：用JS来写，全局声明，用使用Vue.component('组件名',{template:``})，第二个参数可以接收东西和new Vue一模一样
  ——方法3：前两者结合起来。依旧用componens命名，后面的值直接接一个对象，这个对象内容就是组件的内容，也可以看作实例中的实例
• 区分：组件和实例
  实例：使用 new Vue 创建；入口
  组件：使用 Vue.component 或 .vue 文件创建；被别人使用的，可以和其他东西组合的物件；

import Demo from './Demo.vue'
new Vue({
  components:{Demo},//Demo: Demo 的缩写（组件名：组件值）
  template:`
  <Demo/>
  `
}).$mount('#app')

//等价于

Vue.component('Demo2',{
  template:`
   <div>demo2内容</div>
  `
})//一个叫Demo2的组件
new Vue({
  template:`
  <Demo2/>
  `
}).$mount('#app')

• 实例变组件
  1.将 new Vue({内容}) 中的内容复制到 .vue 文件中，template属性中的内容放到 template标签
  2.其他全放在script标签的 export default{} 中默认导出即可
  3.导入 main.js 中，直接渲染 demo
  4.这就是利用单文件组件，写HTML然后用h渲染
  ——vue-loader直接转化Demo组件内容

import Demo from './Demo.vue'
new Vue({
  render:h=>h(Demo)
}).$mount('#app')
//等价于：如果还需要其他内容就用组件+template
import Demo from './Demo.vue'
new Vue({
  components:{Demo},
  template:`
    <button>按钮</button>
    <Demo/>
  `,
  methods:{}
}).$mount('#app')

• 四个钩子
  直接写在最外层
  created：实例出现在内存中
  mounted：实例出现在页面中
  updated：实例更新了
  destroyed：实例消亡了

new Vue({
  created(){
    console.log('触发：组件出现在内存中，没有出现页面时')
  },
  mounted(){
    console.log('触发：组件出现在页面啦')
  },
  updated(){
    console.log('触发：页面更新啦',this.n)//打出最新的n
  },
  destroyed(){
    console.log('触发：组件消亡啦')
  },
  methods:{
    add(){
      this.n += 1
    },
  }
}).$mount('#app')

• props：外部属性
  data是内部数据，props是外部数据
  外部属性：由外部传值 message（有实例传入组件再渲染到页面）
  1.props声明：在组件中声明属性名 message和样式
  2.使用：在Vue实例使用Demo传值：<Demo message="你好 props">
  ——key和value的形式
• props传参
  1.如果什么都不加，则是默认传的字符串
  2.如果message前有冒号：<Demo :message=" n ">，则引号内的n为JS代码，是个代码变量
  ——n优先从data上面找
  3.注意：<Demo :message=" '0' "> === <Demo message="0">
  4.可以传函数

import Demo from './Demo.vue'
new Vue({
  components:{Demo},
  data:{
    n:0
  },
  template:`
  <div>
    {{n}}
    <Demo :message="n" :fn="add">
  </div>
  `,
  methods:{
    add(){
      this.n += 1
    }
  }
}).$mount('#app')

//组件内容
<template>
    <div class="red">
        <!-- 视图 -->
        这里是Demo的内部
        {{message}}
        <button @click="fn">call fn</button>
    </div>
</template>

<script>
export default {
    // 视图之外的其他选项
    props:['message','fn']
}
</script>

<style scoped>
/* CSS */
.red{
    color: red;
    border: 1px solid black;
}
</style>

• render
  尽量使用render来渲染页面更简单，而不是 components 和 template

import Demo from './Demo.vue'
new Vue({
components:{Demo},
template:`
 <Demo/>
`
//等价于
render: h=>h(Demo)
})