vue
vue是一套用于构建用户界面的渐进式框架（渐进式框架的大概意思就是你可以只用我的一部分，而不是用了我这一点就必须用我的所有部分）
1. v-if和v-show的区别
v-show=false,元素存是display:none
v-if=false，元素不存在
image.png
2.v-for使用key
key是为了添加唯一标识，让Diff算法可以正确识别节点并把它插入正确的位置，提高Vue对虚拟DOM的更新效率。
比如：
image.png
无key，逐条更新值
image.png
有key，只需要增加个F节点，插入到B和C之间
有key
3.v-if不能和v-for不能放在同一标签上
v-for优先级高于v-if，当v-for和v-if放在同一标签上时，会先执行v-for，再执行v-if，这样会导致不符合v-if条件的元素也会被v-for
如：
<div id="app">
<ul>
<li v-for="value in testData">
<div id="test" v-if="Array.isArray(value)" v-for="item in value">{{item}}</div>
<div id="test1" v-else>{{value}}</div>
</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
testData: {
name: 'TESTOBJECT',
id: 5,
data: [1.67, 1.33, 0.98, 2.21]
}
}
})
</script>
打印结果：TEST，TEST，TEST，TEST，3，3，3，1.67，1.33，0.98，2.21
TEST打印4次，是因为字符大小是4；3显示3次，是数字大小
上例是这个结果的原因：
-
value为TEST时，v-for先遍历TEST，结果为T，E，S，T（4次）；执行Array.isArray(TEST) == false，执行v-else，所以显示4次TEST -
value为3时，v-for遍布3，结果为：1，2，3（3次）；执行Array.isArray(3) == false；执行v-else，结果为3 -
value为 [1.67, 1.33, 0.98, 2.21]，遍历数组，Array.isArray([1.67, 1.33, 0.98, 2.21]) == true；结果是每一次的值
4.命令注意
vue组件名和prop都可以用驼峰命名和短横线命名，
但html里面只能使用短横线。
（js中的驼峰命名会自动转换成短横线命名。）
字符串模板只能用驼峰。
5.组件之间通信
(1)父子组件之间通信
- 父组件：通过v-bind动态绑定父组件传来的内容(count-val，html里要用短横线分隔命名法)
<Count :count-val="count" @change="changeFn"/> - 子组件：通过props接收父组件传过来的值
props: ['countVal']
父组件prop变化，子组件prop会跟着变，但是子组件变化，不会影响到父组件 - 子组件通过$emit（事件名， 传递参数）触发父组件的自定义事件
<Count :count-val="count" @change="changeFn"/>此处change就是自定义事件
this.$emit('change',this.count);合作$emit触发自定义事件change
App.vue
(2)通过ref通信， - ref在子组件上使用，相当于子组件的索引，通过$refs可以调用子组件的属性和方法
- ref在普通的 DOM 元素上使用，通过$refs可以获取DOM元素的集体，作用与jquery选择器类似
(3)非父子组件间的通信
main.js中
new Vue({
render: h => h(App),
data: {
eventHub: new Vue() // 给data加个vue实例
}
}).$mount('#app')
组件1
methods: {
changeFn(count) {
console.log('count', count);
this.count = count;
}
},
mounted: function() {
// 绑定
this.$root.eventHub.$on('changeEvent', (count) => {
this.changeFn(count);
});
},
beforeDestory: function() {
// 解除绑定，避免内存泄漏
this.$root.eventHub.$off('changeEvent');
}
组件2
this.$root.eventHub.$emit('changeEvent', this.count);
6.vue双向绑定
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：
1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数
image.png
3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图
4、mvvm入口函数，整合以上三者
image.png
7.diff算法
虚拟dom就是用js模拟dom结构
diff算法
patch
- oldVnode是真实dom,创建空的vnode,关联dom元素
- 新不存在，旧存在，删除旧
- 新存在，旧不存在，新增vnode
- 新旧都存在，且是相同节点，调用patchVnode
patchVnode - 新旧相同，return
- 新旧不同，但都是文本节点，替换文本
- 新有子节点，旧没有，新增子节点
- 旧有子节点，新没有，删除子节点
- 新旧都有子节点，且子节点不同，执行updateChildren
updateChildren
开始是递增，结束是递减
新开始->旧开始
新结束->旧结束
新开始->旧结束
新结束->旧结束
有key就根据key，更新到指定位置
没有key就直接更新
如果旧开始>旧结束，说明旧先遍历完，新增vnode中新开始->新结束之间的节点
如果新开始>新结束，说明新先遍历完，移除oldVnode中旧开始->旧结束之间的节点
8.computed和watch
- computed有缓存，值不变不重新计算
- watch
watch不支持缓存，有数据变化直接触发
watch监听引用类型，拿不到oldVal
9.vue样式穿透
在组件作用域内的 CSS中，修改外部引入插件样式，需要用到样式穿透
- scss 使用 ::v-deep
- stylus使用>>>
- sass和less使用/deep/
<style lang="scss" scoped>
// scss
.wrapper::v-deep .el-input__inner{
padding-right: 5px!important;
}
// stylus
.wrapper >>> .el-input__inner{
padding-right: 5px!important;
}
// sass和less
.wrapper /deep/.el-input__inner{
padding-right: 5px!important;
}
<style>
10. vue生命周期
-
beforecreate ->created
初始化事件，进行数据的观测 -
created
data和method已经初始化好了，如果调用method和data最早可以在这里调用 -
created -> beforeMount
el选项（el: '#app'）
没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。此时生命周期到created就停止了
有的话就继续向下编译 -
beforeMount
模板已经常在内存中编译好了，还未挂载到页面，页面还是模板语法 -
beforeMount -> mounted
添加el是undefined
-
mounted
页面渲染完成，最早操作dom，DOM中的模板语法替换成真实数据 -
beforeupdate
数据变化触发 -
updated
页面数据已经被更新 -
beforeDestory
vue实例进入销毁阶段，data,methods还都可用，还没有被销毁 -
destoryed
组件已经被销毁了 - 父子组件生命周期执行顺序（加载渲染过各）
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted - 更新过程
父beforeUpdate->子beforeUpdate->子updated->父updated - 销毁过程
父beforeDestroy->子beforeDestroy->子destroyed->父destroyed
11. data为什么用函数
每个组件形成私有的作用域，不影响其他组件
React
React 是一个用于构建用户界面的 JavaScript 库
vue和react的区别
相同点：
- 数据驱动视图
- 都有Virtual DOM，通过differ算法减少dom操作
- 组件化开发，实现webComponents规范(自定义组件，template)。
- 都有内部状态管理（react的state，vue的data）和外部参数传入（props）
- 都支持服务器端渲染
- 4.都有支持native的方案,React的React native,Vue的weex
- 5.都有管理状态，React有redux,Vue有自己的Vuex（自适应vue，量身定做）
不同点：
1.React严格上只针对MVC的view层,Vue则是MVVM模式
2.virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.
而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
3.组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js';
Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
4.数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
5.state对象在react应用中不可变的,需要使用setState方法更新状态;
在vue中,state对象不是必须的,数据由data属性在vue对象中管理；
webpack
webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。
网友评论