1.Vue中的data为什么是函数不是对象?
因为组件是用来复用的,且JS对象是引用关系,如果组件中的data是对象,那么作用域没有隔离,组件中的data值会相互影响;如果组件中data是函数,那么每个实例可以维护一份被返回对象的独立拷贝,组件实例之间的data值不会相互影响。
vue实例不被复用,因此不存在引用对象的问题。
2.v-if 与v-show的区别
1.共同点
v-if 和 v-show 都可以动态地显示DOM元素
2.不同点
(1)手段:
v-if 是动态的向DOM树内添加或者删除DOM元素;
v-show 是通过设置DOM元素的display样式属性控制显隐;
(2)编译过程:
v-if 切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和
子组件;
v-show只是简单的基于css切换;
(3)编译条件:
v-if 是惰性的,如果初始条件为假,则什么也不做;
只有在条件第一次变为真时才开始局部编译(
编译被缓存?编译被缓存后,然后再切换的时候进行局部卸载);
v-show 是在任何条件下(首次条件是否为真)都被编译,然后被缓存,
而且DOM元素保留;
(4)性能消耗:
v-if 有更高的切换消耗;
v-show 有更高的初始渲染消耗;
(5)使用场景:
v-if 适合运营条件不大可能改变;
v-show 适合频繁切换。
3.Vue相对于jQuery在开发上的优点
vue:是一个精简的MVVM,从技术角度讲。vue.js专注于MVVM模型的ViewModel层,它通过双向数据绑定把view和Model层连接起来,通过对数据的操作就可以完成对页面视图的渲染。
vue和jQuery区别:
①vue和jQuery对比 jquery是使用选择器()选取DOM对象,对其进行赋值、取值、事件绑定等操作,其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象,而数据和界面是在一起的。
②比如需要获取label标签的内容:("label").val(),它还是依赖DOM元素的值;
Vue则是通过Vue对象将数据和View完全分离开来了。
③对数据操作不再需要引用相应Dom元素,可以说数据和view是分离的,他们通过view对象这个vm实现相互绑定的。
4.对Vue组件(component)的理解
vue组件都是一些由html,js,css组成的公共组件,
1.体积小可以复用
2.减少代码量
3.提升开发效率
5.watch同时监听两个值的变化并执行方法
data() {
return {
city: '',
country: ''
}
},
computed: {
address() {
const { city, country } = this
return {
city,
country
}
}
},
watch: {
address: {
handler: function(newval , oldval) {
console.log('address new =:' + newval );
console.log('address old =:' + oldval );
},
immediate: true,
deep: true // true表示可以监听对象中的属性变化
}
}
immediate: 表示在watch中首次绑定的时候,是否执行handler,值为true则表示在watch中声明的时候,就立即执行handler方法,值为false,则和一般使用watch一样,在数据发生变化时才执行
deep: 当需要监听一个对象的变化时,普通的watch方法无法监听带对象内部属性的变化,只有data中的数据才能够监听到变化,此时需要deep属性进行深度监听,设置deep:true,当对象的属性较多时,每个属性的变化都会执行handler
6.watch和computed的区别
- computed的get必须有返回值(return),而watch 中return可有可无
- computed支持缓存,只有依赖的数据发生改变,才会重新进行计算,而watch不支持缓存,数据发生改变,会直接触发相应的操作
- computed可以自定义名称,而watch只能监听和data里面名称相同的属性
- computed不支持异步,当computed内有异步操作是无效,无法监听数据的变化,而watch支持异步
- computed属性值会默认走缓存,计算属性是基于它们的响应式依赖进行缓存的,也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值,而watch监听的函数接受两个参数,第一个是最新的值,第二个是输入之前的值
- 如果一个属性是由其他属性计算而来的,这个属性依赖其他属性,多对一或者一对一,一般用computed,当一个属性发生变化时,需要执行对应的操作,一对多,一般用watch
- computed默认第一次加载的时候就开始监听;watch默认第一次加载不做监听,如果需要第一次加载做监听,添加immediate属性,设置为true(immediate:true)
- computed适用于复杂的运算,而watch适合一些消耗性功能 使用场景:computed----当一个属性受多个属性影响的时候,使用computed-----购物车商品结算。watch---------当一条数据影响多条数据的时候,使用watch-----搜索框.
7.Vue生命周期
从第一二点可知道data的初始化是在created时已经完成数据观测(data observer),并且诸如methods、computed属性 props等已经初始化;那问题来了,
data props computed watch methods他们之间的生成顺序是什么呢?
根据翻看vue源码可知:props => methods =>data => computed => watch;