虚拟dom
Q: vdom是什么?
A: 它是一个Object对象模型,用来模拟真实dom节点的结构;
虚拟DOM的使用基本流程;
vdom的使用流程:
- 获取数据;
- 创建vdom;
- 通过render函数解析jsx,将其转换成 vdom 结构;
- 将 vdom 渲染成真是dom
- 数据更改;
- 使用 diff 算法对比两次 vdom ,生成 patch 对象;
什么是diff算法?
diff算法是比较两个文件的差异,并将两个文件不同之处,将这个不同处生成一个补丁对象(patch) ;
- diff算法来源后端;
- 前端将其应用于虚拟dom的diff算法;
- vue中将 虚拟dom的diff算法放在了 patch.js文件中 ;
- 使用js来进行两个对象的比较( vdom 对象模型);
- diff算法是同级比较;
- 给每一个层级打一个标记,这个标记是一个数字( 这个数字就是key );
什么是jsx?
- A:jsx = javascript + xml;
为什么列表循环要加key?
- A: id 为app的dom结构其实是一个模板,其实就是jsx;
vue的两大特性
- 指令 —— 用来操作dom;
- 组件 —— 组件是html,css,js 等的一个聚合体;
Q:为什么要组件?
A:
- 将一个具备完整功能的项目的一部分进行多处使用;
- 加快项目的进度;
- 可以进行项目的复用;
- 要想实现组件化,那么我们使用的这一部分就必须是完整的,我们把这个完整的整体就称之为组件;
- 插件: index.html img css js ;
- 如果能将 html css js img 等多个部分放在一起,那该有多好,vue将这个聚合体的文件称之为,单文件组件( xx.vue );
基础的组件创建;
- Vue 是构造器函数;
- Vue.extend() 是 vue用来扩展 vue功能( 组件 )的;
- Vue决定不进行 实例化 Vue.extend(),vue借鉴了react,react中组件是标签的形式使用的;
- vue 决定组件要以标签的形式呈现;
- 为了符合 html / html5的规则,所以组件的标签化使用必须注册,注册说白了就是用来解析这个标签化的组件未html能识别的标签;
- 组件使用前必须进行注册;
- 全局注册:
Vue.component('Father',{
template: '<div> 这里是全局注册 </div>'
})
- 局部注册——在组件中用一个components的配置项目来表示只能在注册的范围内使用,其他地方是不能使用的:
new Vue({
el: '#app',
components: {
'HelloWorld': {
template: '<div> 这里是局部注册 </div>'
}
}
})
命名:
一个单词的大写: 注意不要和原生的h5标签重名,比如 header footer Header Footer;
小写带 ’ - ', 比如 header-title;
大驼峰: HelloWorld 使用 : hello-world;
组件的嵌套
- 父组件里面放子组件 ==> 类似于dom结构的父子级结构;
- 将子组件以标签的形式放在父组件的模板中使用;
- 切记,不要放在父组件的内容中;
- 组件不仅可以用双标签表示,也可以使用单标签表示;
<body>
<div id="app">
<Father></Father>
</div>
</body>
<script>
// 第一种;
Vue.component('Father',{
template: '<div> Father <Son></Son></div>'
})
Vue.component('Son',{
template: '<div> son </div>'
})
new Vue({
el: '#app',
});
// 第二种;
new Vue({
el: '#app',
components: {
'Father': {
template: '<div> father组件 <Son /></div>',
components: {
'Son': {
template: '<div> son组件 </div>'
}
}
}
}
})
</script>
is规则;
is规则;
- ul>li ol>li
- table>tr>td
- select>option
如上直属父子级如果直接组件以标签化形式使用,那么就会出现bug;
解决: 使用is规则: 通过is属性来绑定一个组件;
// 案例: table
<body>
<div id="app">
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr is = "Hello"></tr>
</table>
</div>
</body>
<script>
Vue.component('Hello',{
template: '<tr> <td> 4 </td> <td> 2 </td><td> 3 </td></tr>'
})
new Vue({
el: '#app'
})
</script>
template使用;
- 实例范围内使用;
- template中的内容被当做一个整体了,并且template标签是不会解析到html结构中的;
- 实例范围外使用;
- 实例范围外template标签是不会被直接解析的;
组件要想使用template使用,我们采用第二种;
但是使用第二种template使用后,有个弊端,template标签结构会在html文件中显示;
解决: 使用webpack、gulp等工具编译,将来要用vue提供的单文件组件;
<body>
<div id="app">
<h3> 实例范围内使用 </h3>
<template>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
</template>
<h3> 使用 hello 组件</h3>
<Hello></Hello>
</div>
<h3> 实例范围外使用 </h3>
<template id="hello">
<div>
<ul>
<li>1</li>
<li>2</li>
</ul>
</div>
</template>
</body>
<script>
Vue.component('Hello',{
template: '#hello'
})
new Vue({
el: '#app'
})
</script>