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

Vue实例
什么是Vue实例？

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

       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

函数也是对象，所以Vue函数对象的内存图如上。
函数.__proto__===Function.prototype推出Vue.__proto__===Function.prototype

问题一: 初始化时可以写些什么对象进去(options)？
问题二: vm自己有哪些属性？
问题三: Vue函数本身有哪些属性?
问题四: 每个函数都有个属性叫prototype，同时每个对象都有个属性叫__proto__。假设Vue.prototype对应的对象的地址是#419，那请问这个#419里面有哪些属性呢？
问题五:Vue.prototype.__proto__= ?

Vue实例的作用

vm对象封装了对视图的所有操作但不包括ajax,因为ajax是网络层的。

按照ES6的说法，构造函数也可以说是类，所以vm所属的类是Vue。
new Vue(options)options是new Vue的参数，一般称之为选项或构造选项。

一、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（注入）
 

第1类属性 Data:

data 数据 
props 属性
computed 计算属性 //被计算出来的
methods 方法，用来定义方法的
watch 观察 //当data变化时做某些事情就用watch
propsData //很少用,单元测试会用
 

方法和函数的区别？
1.概念:方法是属于面向对象概念，函数属于数学概念。
在面向对象里叫方法,有对象才有方法，方法依附于对象即对象.方法，比如说obj.sayhi()sayhi就叫方法也是函数，一般叫方法。
如果sayhi()这样写就叫函数
在数学里叫函数。
2.都指同一个东西

function(p1,p2){
  return 
}
 

第2类属性 DOM:

el 挂载点 //你要用你的模版替换页面上的哪一块，你的挂载点
template //你的HTML内容。着重讲语法v-if、v-for
render  渲染 //⚠️注意template和render只能二选一！
//template是给完整版用的，render是给非完整版用的。一起用必然有一个会失效！
renderError //很少用
 

第3类属性 生命周期钩子:
生命周期:Vue组件在页面中插入一个<div>监听它的事件，然后用户点击按钮时变化。可以切入的点叫做钩子。

beforeCreate  创建之前
created  创建之后
beforeMount
mounted 挂在之后
beforeUpdate
updated 更新之后
activated
deactivated
beforeDestroy
destroyed 失败之后
errorCaptured //很少用
 

第4类属性 资源

 

directives 指令
filters 过滤器 //尽量不去用，用methods代替
components 组件 
//如果要在一个文件引用另一个Vue的文件就用组建。Demo.vue就叫组件,英文名叫components。
 

第5类属性 组合:

parent //很少用
mixins 混入
extends 扩展
provide 提供
inject 注入
 

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)
})

 参考链接1：0-3 Vue构造选项（Vue实例、内存图、options、入门属性）_一生注定学霸命的博客-CSDN博客

参考链接2：Vue构造选项_老老老老李的博客-CSDN博客