1. MVC 与 MVVM 区别
2.为什么data是一个函数
组件中的data写成了一个函数,数据以函数返回值的形式定义,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。
3.vue 组件通讯方式
props
和$emit
$parent
$children
$attrs
和$listeners
provide
inject
$refs
获取组件实例- eventBus 兄弟组件数据传递
- vuex状态管理
4. vue生命周期
5.v-if 与 v-show 区别
v-if 在编译过程中会被转化成三元表达式,条件不满足时不渲染此节点 v-show 适用于需要非常频繁切换条件的场景
display: none、visibility:hidden、opacity:0之间的区别
三者共同点都是隐藏。不同点
-
是否占据空间 display: none 隐藏之后不占位置 visibility: hidden、opacity: 0 隐藏后仍然占据位置
-
子元素是否继承 display: none 不会被子元素继承
visibility: hidden 会被子元素继承 通过设置子元素 visibility:visible来显示子元素
opacity: 0 会被子元素继承,但是不能通过设置子元素opacity:1来重新显示
- 事件绑定 display: none 无法触发绑定的事件
visibility: hidden 不会触发绑定的事件
opacity: 0 元素上面绑定的事件是可以触发的
- 过渡动画 transition 对于display是无效的
transition 对于visibility是无效的
transition 对于opacity是无效的
6.vue 内置指令
- v-once 被定义了v-once指令的元素或组件(包括元素或组件内的所有子孙节点)只能被渲染一次。首次渲染后,即使数据发生变化,也不会被重新渲染。一般用于静态内容展示。
- v-cloak 可以使用v-cloak 设置样式,这些样式会在vue 实例编译结束时,从绑定的HTML元素上被移除。当网络较慢,网页还在加载vue.js.从而导致vue来不及渲染,这时页面就会显示出vue 源代码。我们可以用v-cloak指令来解决。
<div id="app" v-cloak>
{{ context }}
</div>
[v-cloak] {
display: none
}
- v-bind v-bind 指令可以用于响应式的更新HTML attribute
<!--完整语法-->
<a v-bind:href="url"></a>
<!--缩写-->
<a :href="url">
<!--动态缩写-->
<a :[key]="url">
-
v-on
-
v-html 双大括号会将数据节水为普通文本,而非HTML代码。为了输出真正的HTML,需要使用v-html 指令
站点上动态渲染的任意HTML可能会非常危险,因为它很容易导致XSS攻击。请只对可信内容使用HTML插值,绝对不要对用户提供的内容使用插值。
-
v-text 将数据解析为纯文本
-
v-model
-
v-if/v-else
-
v-show
-
v-for
-
v-pre
7.vue单向数据流
所有的prop都使其父子prop之间形成了一个单向下行绑定: 父级prop的更新会向下流动到子组件中,但是反过来不行。这样会防止从子组件意外变更父级组件的状态,从而导致应用的数据流向难以理解。
每次父级组件发生变更时,子组件的中所有的prop都将刷新为最新的值. 但是我们常常有改变prop值的需求
- 这个op 用来传递一个初始值:这个子组件希望将其作为一个本地的的prop 数据来使用可以定义一个本地的data property 并将这个prop作为其初始值
props: ['initialCounter'],
data() {
return {
counter: this.initialCounter
}
}
- 这个prop以一种原始的值传入且需要进行转换。这种情况,最后使用prop 的值来定义一个计算属性
props: ['size'],
computed: {
normalizedSize() {
return this.size.trim().toLowerCase()
}
}
注意在js中对象和数组是通过引用传入的,所以对于一个数组或对象类型的prop来说,在子组件中改变变更这个对象或数组本身将会影响到父组件的状态
8.computed 和 watch 的区别和运用的场景
computed是计算属性,依赖其他的属性值,并且computed的值有缓存,只有当计算属性的值发生变化才会返回内容,它可以设置getter 和 setter
watch监听到值的变化就会执行回调,在回调中可以进行一些逻辑操作
总结:如果一个数据需要经过复杂计算就用computed,如果一个数据需要被监听并且对数据做一些操作就用watch
9. v-if 和 v-for 为什么不建议一起使用
当vue 处理指令时,v-for 比 v-if 具有更高的优先级。需要一起使用时,可以采用计算属性。
<ul>
<li v-for="user in users" v-if="user.isActive" :key="user.id">
{{ user.name }}
</li>
</ul>
将会经过如下检查
this.users.map(function (user) {
if(user.isActive) {
return user.name
}
})
因此那怕我们我们只渲染出一小部分用户的元素,也得在每次重新渲染的时候遍历整个列表。
computed: {
activeUsers: function() {
return this.users.filter(function(user) {
return user.isActive
})
}
},
<ul>
<li
v-for="user in activeUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
这样子写
- 过滤后的列表只会在users数组发生变化时才被重新运算,过滤更高效
- 使用v-for="user in activeUsers"这样我们只遍历活跃用户,渲染效率更高
- 解耦渲染层的逻辑,可维护性更强。
未完待续。。。