vue部分常用知识点

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() 等方法来实现深拷贝。

综上所述，浅拷贝只复制第一层对象的属性，并且新对象和原始对象之间共享相同的内存地址，而深拷贝则会复制所有嵌套对象的属性，创建一个全新的独立对象。

实现数据同步更新的方法

1. 使用双向绑定：

   在 Vue 中，可以使用 v-model 指令实现表单元素与数据属性之间的双向绑定。当用户在表单元素中输入内容时，数据属性会被更新；反之，当数据属性的值变化时，表单元素的值也会相应更新。

2. 使用计算属性：

   可以使用计算属性来派生其他数据属性的值。当依赖的数据发生变化时，计算属性会自动重新计算并更新相关的数据。通过计算属性，可以将多个数据属性进行联动，实现数据的同步更新。

3. 使用观察者 Watcher：

   在 Vue 中，可以使用观察者 Watcher 来监听数据的变化，并在数据发生变化时执行相应的操作。通过创建一个 Watcher 对象，可以指定需要监听的数据和对应的回调函数，在数据变化时执行相应的逻辑。

4. 使用 Vuex（状态管理库）：

   如果需要在整个应用程序中共享和同步数据，可以使用 Vuex 这个 Vue 的官方状态管理库。Vuex 提供了一种集中式的数据管理方式，通过定义和修改 store 中的状态，实现各组件之间的数据同步更新。

这些方法提供了不同的途径来实现数据的同步更新，具体的选择取决于你的需求和项目的复杂性。双向绑定适用于简单的表单元素的同步更新，计算属性适合处理衍生数据的同步更新，观察者 Watcher 适用于需要监听特定数据变化的场景，而 Vuex 则适用于大型应用中的全局状态管理。根据具体情况，可以选择最合适的方法来实现数据的同步更新。

ref和reative的区别

ref 和 reactive 是 Vue 3 中用于响应式数据的两种不同方式，它们有以下区别：

1. 使用方式：

   • ref 是一个函数，用于创建一个包装对象，将普通数据类型转换为响应式数据。
   • reactive 是一个函数，用于创建一个具有响应式特性的代理对象，可以将复杂的对象转换为响应式数据。

2. 引用类型的处理：

   • ref 主要用于处理基本数据类型，如字符串、数字等。如果传入的是引用类型（如对象），则会对其进行浅层包装并返回一个新的响应式对象。
   • reactive 可以处理任意复杂的对象，包括嵌套对象、数组等。它会递归地将所有属性都转换成响应式的。

3. 访问值：

   • 通过 ref 创建的响应式对象，需要通过 .value 属性来访问和修改实际的值。
   • reactive 创建的响应式对象可以直接访问和修改属性值，无需额外的 .value。

4. 响应式更新：

   • 通过 ref 创建的响应式对象，当其值发生变化时，相关的依赖会被追踪，并触发视图的重新渲染。
   • reactive 创建的响应式对象也会追踪属性的变化并触发视图更新，但需要使用 toRefs 或 ref 函数来将属性转换为响应式。

综上所述，ref 适用于简单的数据类型和基本值的响应式处理，而 reactive 则更适合处理复杂的对象和嵌套结构的响应式数据。根据具体情况，可以选择最适合的方式来创建响应式数据。