看Vue文档总结之路（四）

Vue 的 选项 / 数据：

1、data：（组件里面的数据对象）【粗略的说一样，用得比较多】

类型：（对象 / 函数）

注意点：

1、组件的定义只接受 function
2、数据对象的 property 会被 Vue 递归代理（getter / setter），从而让data数据对象里面的数据能够响应数据变化
3、data对象里面以（ _ 和 $ ）开头的 property 不会被代理
4、可以通过【实例.$data】获取里面的数据对象

---

2、props：（用来接受父组件的数据）【粗略的说一样，用得比较多】

类型：（数组 / 对象）

注意点：

1、props是单向绑定的（当父组件的数据更新的时候，子组件也会更新，但是子组件对 props 里面传过来的值修改则不会修改）
2、子组件可以通过$parent来获取父组件的值，而且不会报错
3、props还可以标注传递过来的值的类型

props:{
    //表明传过来的 index 值是数字类型的
    index:Number,
    //表明传过来的 fn 值是数字类型的
    fn:Function
}

详细解释：

---

3、propsData：（传递数据的一种方法）【用得少，网上也很少资料】

详细用法：

---

4、computed：（计算属性）【用得粗略的说一样，用得比较多】

对 data 对象里面的数据进行计算，并且会返回一个新的值，和 filter 有点像

5、methods：（方法）：【用得粗略的说一样，用得比较多】

定义实例的方法，当实例调用的时候，立即调用

6、watch：（数据监听）：【这个用得比较少】

对 data 对象里面的数据进行监听（需要定义），如果数据里面的值发生改变的话就触发 watch 里面的监听器，如果是引用类型的话就需要添加关键字 deep 深度监听

computed、methods、watch这三者的区别：

---

选项 / DOM：

1、el：（对页面已存在的DOM进行挂载）【这个没必要说了】

---

2、template：（以字符串为模板）【这个没必要说了】

注意点：
如果值为 # 号开头的，它将作为选择符

---

3、render：（渲染函数，可以通过自己自定义动态生成DOM）【没用过】

具体用法：

---

4、renderError：（当 render 渲染失败的时候，提供另一个 render 方法）【没用过】

new Vue({
  render (h) {
    throw new Error('oops')
  },
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }
}).$mount('#app')

---

选项 / 资源：

1、directives：（自定义指令，具体看 Vue的全局API）

2、filters：（自定义过滤器，具体看 Vue的全局API）

3、components：（注册组件，里面填入单个或者多个组件对象）

---

选项 / 组合：

1、parent / children：（访问子组件或者组件）【应急才用】

指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。

---

2、mixins：（混入属性，里面填入要混入的对象，具体看 Vue的全局API）

参数：
数组（数组里面以对象为数组元素）

---

3、extends：（继承一个对象配置来扩展组件）【不大明白】

允许声明扩展另一个组件 (可以是一个简单的选项对象或构造函数)，而无需使用 Vue.extend。这主要是为了便于扩展单文件组件。
类型：
对象 / 函数

var CompA = { ... }

// 在没有调用 `Vue.extend` 时候继承 CompA
var CompB = {
  extends: CompA,
  ...
}

---

4、provide / inject：（通讯属性，祖先传值给子孙）

详细解释

---

选项 / 其他：

1、name：（组件的名字，只有作为组件选项时起作用）

---

2、delimiters：（修改组件的插值表达式）

参数： 数组，默认值： ["{{", “}}”]

<div id="app">${msg}</div>


const app = new Vue({
    delimiters:["${","}"],
    //把模板字符串修改成 ${  }
    el:"#app",
    data(){
        return {
            msg:"修改模板插值表达式"
        }
    }
})

---

3、functional：（函数组件化）【不会，需要继续学习】

详细解释：

---

4、model：（和 v-model 脱不了关系）【有点懵逼】

详细解释

---

5、inheritAttrs：（是否不切断父组件传递过来的参数）

参数： 布尔值，默认值： true

详细解释

---

6、comments：（是否保留且渲染模板中的 HTML 注释）

参数： 布尔值，默认值： false