2022.4.14

适用于Vue2的基础学习笔记，仅记录

options

一、 el

选择一个元素做为挂载点，即选择一个元素进行操作。也可以使用 Vue.$mount()

new Vue({
    el：‘#App’
})

二、template

模板语法，可以写成XML或者对象形式，会替换掉挂载元素原有的html

<template>
    <div>你好</div>
</template> 

template:`<div>你好<div>`

二、data

实例内部的数据，支持对象和函数，组件中高的data只能使用函数当Vue示例被创建时，会将data中的所有数据响应式的渲染到页面中的对应位置 Vue 会递归地把 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。

var vm = new Vue({ 
    data: data
})

当一个组件被定义，data 必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实例。如果 data 仍然是一个纯粹的对象，则所有的实例将共享引用同一个数据对象！通过提供 data 函数，每次创建一个新实例后，我们能够调用 data 函数，从而返回初始数据的一个全新副本数据对象

三、methods

methods对象中是操作data的api，可以使事件处理函数或普通函数，方法中的this会自动绑定到Vue实例上，所以不能为箭头函数

var vm = new Vue({ 
    data: { a: 1 }, 
    methods: { 
        plus: function () { 
            this.a++ 
        } 
    } 
})

四、components

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项。但是组件的data必须为函数，这样是为了使每份组件都能获得一份data的拷贝，防止不同的组件修改数据时，被互相覆盖。

Vue.component('button-counter', { data: function () { return { count: 0 } },

五、props

可以是数组或对象，用于接收来自父组件的数据。外部数据和data相对数据组件中定义的数据导出后，子组件可以通过引用，并props['message:'n'']的方式引入。

六、computed

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例计算属性的结果会被缓存，除非依赖的响应式 property 变化才会重新计算。注意，如果某个依赖 (比如非响应式 property) 在该实例范畴之外，则计算属性是不会被更新的。

var vm = new Vue({ 
    data: { a: 1 }, 
    computed: { 
        // 仅读取 
        aDouble: function () { 
            return this.a * 2 
        }, 
        // 读取和设置 
        aPlus: { 
        get: function () { 
            return this.a + 1 
        }, 
        set: function (v) { 
            this.a = v - 1 } 
        } 
    } 
})

七、watch

指定一个需要监听的值，当这个值发生变化时，执行一个指定的函数(不能是箭头函数)。‘异步’

new Vue（{
    watch:{key:function(){}}
}）

注意：computed默认是有缓存机制的，其依赖的属性没有发生变化，就不会重新计算，同时由于缓存机制的原因，watch可能会被滥用，如果是响应式的数据优先使用computed

watch和computed的区别

computed是计算属性，watch是监听的意思
computed是用来计算一个值的，这个值在调用时不要加括号，当做属性使用，有缓存机制，依赖不变不会重新计算
watch作用是监听对象发生了变化，执行一个函数。
watch有两个选项：
1. immediate 是否在第一次渲染时监听变化，执行函数
2. deep 是否监听对象内部属性的变化

什么叫做数据变化？在vue中，当你把一个对象原封不动的复制给另一个对象，vue会认为这个对象变了，但其内部的值并没有变化，这是因为：简单类型看值是否改变，复制类型（对象）看地址。

Vue基础笔记（一）