Vue创建一个实例
<div id="app">{
{msg}}</div>
<script src="node_modules/vue/dist/vue.js"></script>
<script>
let vm = new Vue({
el:'#app',
// template加上之后会替换掉#app这个标签
// template:'<h1>en</h1>',
data:{
msg:'msg'}
})
vm.msg = 'msg'
</script>
vm的实质
当vm中的数据改变之后,视图也会发生变化,这就是vue的数据驱动视图,同时也是vue的响应式的实现原理,vue是通过Object.defineProperty来实现的响应式的,也就是对data中的属性的读取和设置操作都进行了监听,当有这样的操作的时候(get或者set的时候),就会执行相关的方法。
// 对obj上面的属性进行读取和设置监听
let obj = {
name:'huahua',
age:18
}
function observer(obj){
// 这里相当于是一个观察者,只针对js对象进行相关的操作