一、vue 项目生成。
- vue项目可以使用脚手架工具生成。结构如下:
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
- vue项目可以通过页面引入vue.js ,直接在html中使用
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const v= new Vue({
el:"#app",
render:(h)=>{
return h("h1","heheheh")
}
})
</script>
</body>
两者本质没什么区别。前者写到了src/main.js 中,这个文件最终也会被webpack打包到成js ,插入到Html页面中。
二、vue 数据注入
vue中data, computed, methods 会被注入到 vue实例中
<body>
<div id="app"></div>
<script>
const v = new Vue({
el: "#app",
data: {
a: 5,
b: 3
},
computed: {
num() {
return this.a + this.b
}
},
methods: {
getSum() {
console.log("求和了")
return this.a + this.b
}
},
render: (h) => {
return h("h1", "heheheh")
}
})
</script>
</body>
这样,v实例是一个对象包括,data, computed, methods这三个注入的基本数据,以及vue自带的一些方法:$mount等等。
三、虚拟DOM树
直接操作真实DOM会引发严重的效率问题,vue使用虚拟DOM(vnode)的方式来描述要渲染的html结构,其本质是一个js对象。(其实和react比较相似)
var vnode={
tag: 'h1',
children:[
{tag:undefined,text:"hello vue"}
]
}
其对应的html结构为
<h1>hello vue</h1>
当data里面的数据发生变化时候,虚拟DOM(vnode)也跟着变化,寻找与之前vnode的差距,进行局部的渲染,提高了效率。
四、vue 将哪些内容生成vnode
所有的,最终都要转成(1)这种形式,优先级为(1)>(2)>(3)当三个,同时存在时候,只有优先级高的生效,如图,渲染结果为hello vue
五、挂载
(1)和(2)效果是一摸一样的。将生成的虚拟dom 挂在到Html的某个位置上,完成虚拟dom到真实dom的转变。