Vue是一套用于构建用户界面的渐进式JavaScript框架。
vue 的优点
- 低耦合。视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的"View"上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。
- 可重用性。你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 view 重用这段视图逻辑。
- 独立开发。开发人员可以专注于业务逻辑和数据的开发(ViewModel)
- 可测试性。
什么是 mvvm?
M:模型(Model):数据模型;负责数据存储。泛指后端进行的各种业务逻辑处理和数据操控,主要围绕数据库系统展开。
V就是:View 视图: 负责页面展示,也就是用户界面。主要由 HTML 和 CSS 来构建
VM就是:视图模型(View-Model): 负责业务逻辑处理(比如Ajax请求等),对数据进行加工后交给视图展示
通过vue类创建的对象叫Vue实例化对象,这个对象就是MVVM模式中的VM层,模型通过它可以将数据绑定到页面上,视图可以通过它将数据映射到模型上。
vue的生命周期
- 创建前/后: 在 beforeCreate 阶段,vue 实例的挂载元素 el 还没有。
- 载入前/后:在 beforeMount 阶段,vue 实例的$el 和 data 都初始化了,但还是挂载之前为虚拟的 dom 节点,data.message 还未替换。在 mounted 阶段,vue 实例挂载完成,data.message 成功渲染。
- 更新前/后:当 data 变化时,会触发 beforeUpdate 和 updated 方法。
- 销毁前/后:在执行 destroy 方法后,对 data 的改变不会再触发周期函数,说明此时 vue 实例已经解除了事件监听以及和 dom 的绑定,但是 dom 结构依然存在
组件之间的传值
- 父组件与子组件传值
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//父组件通过标签上面定义传值
<
template
>
<
Main
:obj
=
"data"
></
Main
>
</
template
>
<
script
>
//引入子组件
import Main form "./main"
exprot default{
name:"parent",
data(){
return {
data:"我要向子组件传递数据"
}
},
//初始化组件
components:{
Main
}
}
</
script
>
//子组件通过props方法接受数据
<
template
>
<
div
>{{data}}</
div
>
</
template
>
<
script
>
exprot default{
name:"son",
//接受父组件传值
props:["data"]
}
</
script
>
- 子组件向父组件传递数据
-
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
//子组件通过$emit方法传递参数
<
template
>
<
div
v-on:click
=
"events"
></
div
>
</
template
>
<
script
>
//引入子组件
import Main form "./main"
exprot default{
methods:{
events:function(params){
console.log(params)
}
}
}
</
script
>
//
<
template
>
<
div
v-on:click
=
"emitEvent"
>{{data}}</
div
>
</
template
>
<
script
>
exprot default{
name:"son",
//接受父组件传值
props:["data"],
methods: {
emitEvent() {
this.$emit('event', params) // 派发函数,并传递值,params是你自己想传的值
}
}
}
</
script
>
vue组件通讯
1、props 和 $emit。父组件向子组件传递数据是通过props传递的,子组件传递给父组件是通过 $emit触发事件来做到的。
2、$parent 和 $children 获取当前组件的父组件和当前组件的子组件。
3、$attrs 和 $listeners A -> B -> C。Vue2.4开始提供了$attrs和$listeners来解决这个问题。
4、父组件中通过 provide 来提供变量,然后在子组件中通过 inject 来注入变量。(官方不推荐在实际业务中适用,但是写组件库时很常用。)
5、$refs 获取组件实例。
6、eventBus 兄弟组件数据传递,这种情况下可以使用事件总线的方式。
7、vuex 状态管理。
vue表单
- 使用
v-model
指令可以实现表单元素与数据属性的双向绑定。 v-model
可以用于输入框、复选框、单选按钮以及选择框等表单元素。- 通过
v-model
,可以直接将用户输入的值同步到 Vue 实例中的数据属性,并自动更新视图。
<view class="title">表单</view>
<view>{{msg}}</view>
<input v-model="msg"/>
<input v-model.lazy="msg"/>
<input type="text" v-model.trim="msg"/>
<view>{{score+1}}</view>
<input v-model.number="score"/>
<switch color="#f70" v-bind:checked="isLog" @change="isLog=$event.detail.value"></switch>
<switch color="#f70" type="checkbox" v-bind:checked="isLog" @change="isLog=$event.detail.value"></switch>
<view>单选:{{sel}}</view>
<radio-group name="" @change="sel=$event.detail.value" >
<view v-for="item in list" :key="item">
<label class="radio">
<radio :value="item" :checked="item==sel" /><text>{{item}}</text>
</label>
</view>
</radio-group>
<view>多选框:{{csel}}</view>
<checkbox-group name="" @change="csel=$event.detail.value">
<block v-for="item in list" :key="item">
<label>
<checkbox :value="item" :checked="csel.includes(item)" /><text>{{item}}</text>
</label>
</block>
</checkbox-group>
浅拷贝和深拷贝的区别
浅拷贝和深拷贝是在编程中常用的两种对象复制的方式
浅拷贝:
- 浅拷贝创建一个新对象,并将原始对象的属性值复制到新对象中。
- 复制的是引用而不是实际的对象,因此新对象和原始对象仍然共享相同的内存地址。
- 当修改新对象或原始对象的属性时,另一个对象也会受到影响。
- 浅拷贝通常可以通过 Object.assign()、Array.slice() 等方法来实现。
深拷贝:
- 深拷贝创建一个全新的对象,并将原始对象的所有属性及其嵌套对象的属性进行递归复制。
- 完全复制了对象及其所有嵌套对象,新对象与原始对象相互独立,修改其中一个不会影响另一个。
- 深拷贝更加耗费时间和资源,特别是对于包含大量嵌套对象的复杂数据结构。
- 通常可以通过 JSON.parse(JSON.stringify(object))、lodash.cloneDeep() 等方法来实现深拷贝。
综上所述,浅拷贝只复制第一层对象的属性,并且新对象和原始对象之间共享相同的内存地址,而深拷贝则会复制所有嵌套对象的属性,创建一个全新的独立对象。
实现数据同步更新的方法
-
使用双向绑定:
在 Vue 中,可以使用v-model
指令实现表单元素与数据属性之间的双向绑定。当用户在表单元素中输入内容时,数据属性会被更新;反之,当数据属性的值变化时,表单元素的值也会相应更新。 -
使用计算属性:
可以使用计算属性来派生其他数据属性的值。当依赖的数据发生变化时,计算属性会自动重新计算并更新相关的数据。通过计算属性,可以将多个数据属性进行联动,实现数据的同步更新。 -
使用观察者 Watcher:
在 Vue 中,可以使用观察者 Watcher 来监听数据的变化,并在数据发生变化时执行相应的操作。通过创建一个 Watcher 对象,可以指定需要监听的数据和对应的回调函数,在数据变化时执行相应的逻辑。 -
使用 Vuex(状态管理库):
如果需要在整个应用程序中共享和同步数据,可以使用 Vuex 这个 Vue 的官方状态管理库。Vuex 提供了一种集中式的数据管理方式,通过定义和修改 store 中的状态,实现各组件之间的数据同步更新。
这些方法提供了不同的途径来实现数据的同步更新,具体的选择取决于你的需求和项目的复杂性。双向绑定适用于简单的表单元素的同步更新,计算属性适合处理衍生数据的同步更新,观察者 Watcher 适用于需要监听特定数据变化的场景,而 Vuex 则适用于大型应用中的全局状态管理。根据具体情况,可以选择最合适的方法来实现数据的同步更新。
ref和reative的区别
ref
和 reactive
是 Vue 3 中用于响应式数据的两种不同方式,它们有以下区别:
-
使用方式:
ref
是一个函数,用于创建一个包装对象,将普通数据类型转换为响应式数据。reactive
是一个函数,用于创建一个具有响应式特性的代理对象,可以将复杂的对象转换为响应式数据。
-
引用类型的处理:
ref
主要用于处理基本数据类型,如字符串、数字等。如果传入的是引用类型(如对象),则会对其进行浅层包装并返回一个新的响应式对象。reactive
可以处理任意复杂的对象,包括嵌套对象、数组等。它会递归地将所有属性都转换成响应式的。
-
访问值:
- 通过
ref
创建的响应式对象,需要通过.value
属性来访问和修改实际的值。 reactive
创建的响应式对象可以直接访问和修改属性值,无需额外的.value
。
- 通过
-
响应式更新:
- 通过
ref
创建的响应式对象,当其值发生变化时,相关的依赖会被追踪,并触发视图的重新渲染。 reactive
创建的响应式对象也会追踪属性的变化并触发视图更新,但需要使用toRefs
或ref
函数来将属性转换为响应式。
- 通过
综上所述,ref
适用于简单的数据类型和基本值的响应式处理,而 reactive
则更适合处理复杂的对象和嵌套结构的响应式数据。根据具体情况,可以选择最适合的方式来创建响应式数据。