Vue2

Vue2的创建实例

现在来学习Vue2的创建实例，仍然能够帮助我们更加深刻的理解Vue的工作原理

<script src="./vue.js"></script>

<script>
    Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示
    const vm = new Vue({
        el: "#root",
        data: {
            msg: 'Hello Vue!'
        }
    })
</script>

<script src="./vue.js"></script>

<script>
    Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示
    const vm = new Vue({
        data: {
            msg: 'Hello Vue!'
        }
    })
    vm.$mount('#root')
</script>

通过html单独引入vue.js的应用模式下，我们可以很清晰的感受到，vue在工作的状态就是将编写好的模板翻译成html语言，实现响应式数据的功能

其中，Vue被导入进来后，作为一个函数存在，且必须要将其实例化为对象才能使用，通过选项对象模式来配置vue对象中的参数

然而，$mount（挂载方法）并不是由vue对象直接提供的，而是通过其原型对象中获取到的（原型链调用）

上面的示例是简介了挂载方式的两种方法：通过el属性配合css选择器的方式，或者是通过$mount方法调用的方式（以上两种方式在vue3中都不可用）

同样的，vue中data属性的赋值也有两种方式：

• 对象式（组件中调用不适用）
• 函数式

// 对象式
new Vue({
    data: {
        msg: 'Hello Vue!'
    }
})

// 函数式
new Vue({
    data : function(){
        return {
            msg : 'Hello Vue!'
        }
    }
})

// 函数式（简写）
new Vue({
    data(){
		return {
            msg : 'Hello Vue!'
        }
    }
})

因为箭头函数this指向上级目录的缘故，在vm对象中使用函数式进行配置时都尽量不要使用箭头函数

MVVM

Vue采用了很多MVVM的开发思想，vue对象就是一个vm视图模型，他通过很多操作将模板和数据关联起来，最终实现了数据绑定的效果

数据代理

Object.defineProperty这个方法是js提供的一个Object类的方法，可以为对象增加属性

let person ={
    name : "xiaobai",
    sex : "男",
    //age :18
}

let number = 19

// 通过这个方法为age添加value值
Object.defineProperty(person,'age',{
    value:18,
    enumerable: true, //可枚举，默认是false
    writable:true, //可修改，默认是false
    configurable:true //可删除，默认是false
    
    // 一个回调函数，当此属性被访问的时候执行
    get(){
    	return number
	}
	
	// 一个回调函数，当属性被修改的时候执行
	set(value){
        number = value
    }
})

这样，我们就创建了一个数据代理，则number的值会影响到person对象中age属性的值

在对person.age执行get操作时，会直接返回number

在对person.age执行set操作时，会将number的值设置为新的值

这样number就是person.age对象的数据代理

在vue中，vm对象的data对象就配置成为vm中新增属性的代理，也是通过defineProperty来配置的

在这段代码中，我们通过函数式为vm对象添加了属性msg，并且创建了代理属性data.msg

当使用插值表达式读取msg属性时，直接读取到data.msg属性

当为msg属性修改值时，直接修改data.msg属性

Vue.config.productionTip = false // 阻止 vue 在启动时生成生产提示
const vm = new Vue({
    data(){
        msg: 'Hello Vue!'
    }
})
vm.$mount('#root')