vue相关

Posted 2021-03-05 annie211

一、mvvm
model：基本的业务逻辑
view：页面视图
viewModel：接口提供两个东西：动作和数据，将model和view两者联系在一起。

优点：
1.降低耦合，视图（view）和数据（model）可以独立开来；
2.可重用性，把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑;
3.独立开发，业务逻辑、数据和页面设计独立专注开发；
方便测试，测试可以针对ViewModel来测试；

核心：
MVVM是将“数据双向绑定”的思想作为核心，因此在View和Model之间没有联系，通过ViewModel进行交互，而且Model和ViewModel之间的交互是双向的，因此view的数据的变化会同时修改数据源，而数据源数据的变化也会立即反应到View上。

mvvm在vue中的体现：
组件内双向绑定的实现：
父组件：
<div>
<input type="text" v-model="value">
<children :val="value"></children>
</div>
data:{
value:‘‘
}

子组件：
<input type="text" :value="val" @input="handlerInput">

props:["val"]
handlerInput(e){
this.$emit("input",e.target.value)
}

二、vue有哪些指令：
v-for、v-show、v-html 、v-if

三、监控某个属性的变化：
1.深度监控，监测所有属性的变化
watch:{
obj:{
handler(newVal,oldVal){

},
deep:true
}
}

2.监测某个属性的变化：
watch:{
‘obj.a‘:{
handler(newVal,oldVal){

}
}
}

3.
computed:{
a1(){
return this.obj.a;
}
}

4.watch与computed的区别？

四、vue中怎样动态添加属性：
<button @click="addObjB"></button>
data:{
obj:{
a:‘‘
}
}

methods:{
addObjB(){
this.$set(this.obj,‘b‘,111)
}
}
$set()方法相当于手动的去把obj.b处理成一个响应式的属性，此时视图也会跟着改变了

五、delete与Vue.delete区别
var a=[1,2,3,4]
var b=[1,2,3,4]
delete a[1]
console.log(a) //[1,empty,3,4]
this.$delete(b,1)
console.log(b) //[1,3,4] 直接删除，改变了数组的键值