【vue的技术要点】

浅浅的花香味﹌ 2024-03-27 11:27 50阅读 0赞

#### 一、Vue的组成 ####

Vue.js是一套构建用户界面的框架，它的核心库只关注视图层，并且非常容易学习，易于上手。它的核心组件有：virtual DOM、数据驱动、组件、路由、状态管理、模块系统等。

#### 二、Vue的MVVM的理解 ####

M是模型（Model）：数据模型；负责数据存储。泛指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。

V是View 视图，负责页面展示，也就是用户界面。主要由 HTML 和 CSS 来构建

VM是视图模型（View-Model），负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

ViewModel为model和view之间的桥梁：监听模型数据的改变和控制视图行为、处理用户交互。通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反映到View 上

#### 三、vue的核心组件 ####

**1. 组件化:** Vue.js支持组件式开发，可以将应用的复杂界面分解成若干个独立的可复用的组件，减少耦合，还可以提高代码的可重用性, 模块化开发更加便捷。

**2. Virtual DOM:** Virtual DOM 是虚拟 DOM 的简称，它是通过 JavaScript 将 DOM 结构映射到 JS 对象，使得操作和渲染 DOM 非常方便。

**3. 数据驱动:** Vue.js 使用响应式数据驱动来构建用户界面，当数据发生变化时，视图会自动更新，从而实现了数据和视图的双向绑定，使得前端开发变得更加简单。

**4. 状态管理：** Vue.js 提供内置的状态管理工具，使用它可以轻松地管理应用中的状态，并进行复杂的状态变更，从而实现更灵活的数据控制。

**5. 路由：** Vue.js 支持单页面应用开发，可以使用它来构建复杂的前端路由系统，从而实现前端路由的管理和控制。  
![在这里插入图片描述][42cd8d7cd8b54214b54d3dd0bea788a3.png]

#### 四、vue的生命周期 ####

beforeCreate--创建Vue实例前
    created--创建实例成功后（一般在这里实现数据的异步请求）
    beforeMount--渲染DOM之前
    mounted--渲染DOM完成
    beforeUpdate--更新渲染之前
    updated--更新后
    beforeDestroy--销毁前
    destroyed--销毁后
    //(加入了keep-alive会多两个生命周期）
    activated--当缓存组件有被显示出来时，会触发这个钩子函数
    deactivated--当缓存的组件隐藏时，会触发这个钩子函数

一旦进入到页面或者组件，会执行哪些生命周期顺序?

beforeCreate----created----beforeMount----mounted

在哪个阶段有el，在哪个阶段data?

beforeCreate----啥也没有
    created----有data没有el
    beforeMount----有data没有el
    mounted----既有data也有el

如果加入keep-alive，第一次进入组件会执行哪些生命周期？

beforeCreate----created----beforeMount----mounted----activated

如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期？  
只执行一个生命周期：activated。

#### 五、Vue 中常用的修饰符有哪些？ ####

1. 事件修饰符  
stop 阻止事件继续传播  
prevent 阻止标签默认行为  
self 只当在 event.target 是当前元素自身时触发处理函数  
once 事件将只会触发一次  
capture 用事件捕获模式,元素自身触发的事件先在此处处理，然后交由内部元素处理  
passive 告诉浏览器你不想阻止事件的默认行为  
native 如果在自定义组件标签上绑定原生事件，则需要加上.native

2. 表单修饰符  
lazy 当光标离开标签时，才会将值赋值给value  
trim 过滤掉两边的空格  
number 自动将用户的输入值转为数值类型，但如果这个值无法被parseFloat解析，则会返回原来的值

3. 鼠标按钮修饰符  
left、right、Middle

4. 键盘修饰符  
enter、tab、delete、esc、space、up、down、left、right

5. 系统修饰键  
ctrl、alt、shift、Meta

6. v-bind修饰符  
sync、props、camel

#### 六、vue数据双向绑定原理 ####

Vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。  
v-model用于表单数据的双向绑定，其实它的本质就是一个语法糖，这个背后就做了两个操作：

*  1）v-bind给组件绑定了一个value属性；
 *  2）v-on指令给当前元素绑定input事件，事件触发时将绑定的变量重新赋值

#### 七、怎样动态加载路由 ####

*  1）注册所有路由，根据后台返回菜单数据，显示菜单。  
    弊端：路由全部注册，菜单没有显示；用户可以手动更改url值，依然会显示当前组件。
 *  2）前端手动写好，根据不同的角色，创建多个不同的路由，根据登录的角色，动态地加载某个数组。  
    弊端：如果后台新增角色，那么只有修改前端代码，重新部署。
 *  3）菜单动态生成路由映射  
    菜单->url->路由->path->component（数组，routes）  
    后台返回的菜单，有url；url对应的是路由里面的path；path对面不同的组件。  
    1、菜单中有加载组件的名称component（名称/路径必须和前端写好的一致，不可移动组件位置）  
    2、（推荐）直接根据菜单的url。查找前端代码中的对应关系。生成数组routes

#### 八、vue中的v-cloak的理解？ ####

使用 v-cloak 指令设置样式，这些样式会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。

一般用于解决网页闪屏的问题，在对一个的标签中使用v-cloak，然后在样式中设置\[v-cloak\]样式,\[v-cloak\]需写在 link 引入的css中，或者写一个内联css样式，写在import引入的css中不起作用。

#### 九、v-for中的key的理解？ ####

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确地识别此节点。主要是为了高效地更新虚拟DOM。

#### 十、Vue 的最大的优势是什么？ ####

Vue可以进行组件化开发, 大量减少代码的编写，更易于理解。最突出的优势在于可以对数据进行双向绑定。相比传统的页面通过超链接的方式实现页面切换和跳转，vue 使用路由不会刷新页面。

vue是单页面应用,不用每次跳转页面都要请求所有数据和dom，提高了访问速度和用户体验，而且他的第三方组件库使用起来更加节省开发时间,从而提高开发效率

#### 十一、封装 Vue 组件的过程 ####

使用 Vue.component 方法注册组件，子组件需要数据，可以在 props 中接受定义，而子组件修改好数据后，想把数据传递给父组件。可以采用$emit 方法向外抛数据，如果需要给组件传入模板，则定义为插槽 slot。如果需要父组件主动调用子组件的方法可以在methods 选项中开放方法。

#### 十二、vuex的使用？ ####

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化，具体包括：

*  1、state：Vuex 使用单一状态树,即每个应用将仅仅包含一个store 实例，但单一状态树和模块化并不冲突。存放的数据状态，不可以直接修改里面的数据。
 *  2、getter：state的计算属性，类似vue的计算属性，主要用来过滤一些数据。
 *  3、action：actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法，简单地说就是异步操作数据。view 层通过 store.dispath 来分发 action。可以异步函数调用
 *  4、mutation：mutations定义的方法动态修改Vuex 的 store 中的状态或数据
 *  5、modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

#### 十三、Vue 组件如何进行传值的 ####

1.  父组件向子组件传递数据：父组件内设置要传的数据，在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上，在子组件添加参数 props 接收即可。
2.  子组件向父组件传递数据：子组件通过 Vue 实例方法$emit 进行触发并且可以携带参数，父组件监听使用@（v-on）进行监听，然后进行方法处理

#### 十四、 怎么捕获 Vue 组件的错误信息？ ####

1.  errorCaptured 是组件内部钩子，当捕获一个来自子孙组件的错误时被调用，接收 error、 vm、info 三个参数，return false 后可以阻止错误继续向上抛出。
2.  errorHandler 为全局钩子，使用 Vue.config.errorHandler 配置，接收参数与 errorCaptured 一 致，2.6 版本后可捕捉 v-on 与 promise 链的错误，可用于统一错误处理与错误兜底

#### 十五、vue-router有哪几种导航钩子？ ####

1.  全局导航钩子：router.beforeEach(to,from,next)，作用：跳转前进行判断拦截。
2.  组件内的钩子；
3.  单独路由独享组件

#### 十六、Vue中组件性能优化的思路有哪些？ ####

1.  组件懒加载，当访问到某个路由时才动态加载该组件。
2.  列表渲染使用key，将元素的唯一索引作为key，可以更大化利用dom节点，提升列表渲染性能。
3.  使用函数式组件，渲染开销低，速度快，因为函数式组件只是个函数。
4.  多使用v-show，少用v-if可以更快地实现渲染和响应，避免渲染停顿。
5.  使用keep-alive，保持组件的数据缓存，避免被重新渲染

#### 十七、Vue3.0的新特性有哪些？ ####

1.  性能提升，打包大小减少41%，内存使用减少54%，初次渲染快55%，更新快133%
2.  组合式API(Componsition API)
3.  更好的Typescript支持
4.  底层响应式原理使用ES6的Proxy

#### 十八、Proxy和Object.defineProperty的区别是什么？ ####

Proxy的意思是代理，可以代理对象上的操作，通过new方式创建对象，第一个参数是被代理的对象，第二个参数是对象操作的描述，实例化后返回一个新的对象，当我们对这个新的对象进行操作时就会调用描述中对应的set,get方法

Object.defineProperty只能监听到单个属性的操作，而Proxy除读写外还可以监听属性的删除，方法的调用等。

vue2中我们想要监听数组的变化，基本要依靠重写数组的方法实现，vue3中Proxy可以直接监听数组的变化

#### 十九、Vue的单页面应用的优缺点有哪些？ ####

优点：

1.  用户体验好，快，内容的改变不需要重新加载整个页面，对服务器压力较小
2.  前后端分离，比如vue项目。
3.  完全的前端组件化，前端开发不再以页面为单位，更多地采用组件化的思想，代码结构和组织方式更加的规范，便于修改和调整

缺点：

1.  不支持低版本浏览器
2.  首次加载页面的时候需要加载大量的静态资源，这个加载时间相对较长
3.  不利于SEO（搜索引擎）的优化，单页页面，数据在前端渲染，就意味着没有SEO
4.  页面导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

#### 二十、vue和react有什么区别？ ####

React是一个用于创建可重用且有吸引力的UI组件的库。它非常适合经常变化的数据的组件。使用React，我们可以通过将它们分解为组件来构建可重用的用户界面，它的使用使得构建交互式UI非常容易

Vue.js是一个开源JavaScript框架，能够开发单页面应用程序。它还可以用作Web应用程序框架，目的在于简化Web开发。它的流行有很多原因，其中一个关键原因是它能够在没有任何动作的情况下重新渲染，它允许构建可重用，是一个小巧但功能强大的组件而且允许我们在需要时随时添加组件。

总之如果想要一个轻量级，更快速，更现代的UI库来制作单页面应用程序应该选择Vue.js，如果是大规模应用程序和移动应用程序的应该选择React。

#### 二十一、vue的计算属性computed与监听器watch ####

计算属性computed和监听器watch都可以观察属性的变化从而做出响应，不同的是：

计算属性computed更多是作为缓存功能的观察者，它可以将一个或者多个data的属性进行复杂的计算生成一个新的值，提供给渲染函数使用，当依赖的属性变化时，computed不会立即重新计算生成新的值，而是先标记为脏数据，当下次computed被获取时候，才会进行重新计算并返回。  
而监听器watch并不具备缓存性，监听器watch提供一个监听函数，当监听的属性发生变化时，会立即执行该函数。  
computed  
在vue单文件组件中做的就是对数据进行简单的一些逻辑计算，这在项目开发中很方便我们对原始数据进行处理。

重要的是计算属性是基于它们的响应式依赖进行缓存的；只有当响应依赖关系变了即值发生变化了才会重新计算。否则，直接利用缓存，这样既避免多次调用函数又提升了性能。

const vm = new Vue({
        
      el: '#demo',
      data: {
        
       firstName: 'kevin',
       lastName: 'Xie'
      },
      computed: {
        
       fullName () {
        
         return this.firstName + ' ' + this.lastName
       }
      }   
    })

computed 有两个属性getter 和 setter，上面我们只用到了getter属性，默认是getter属性，如果需要主动去改变getter的值，可以通过setter来实现。

computed: {
        
      fullName: {
        
        // getter
        get: function () {
        
          return this.firstName + ' ' + this.lastName
        },
        // setter
        set: function (newValue) {
        
          var names = newValue.split(' ')
          this.firstName = names[0]
          this.lastName = names[names.length - 1]
        }
      }
    }

watch  
watch 则多数监听数据改变去执行异步操作和逻辑复杂的操作。同样watch也是在当值发生改变才会触发，不过没有缓存机制

const vm = new Vue({
        
      el: '#demo2',
      data: {
        
        visible: false
      },
      watch: {
        
        visible (newVal, oldVal) {
        
            // ...some code
        }
      }
    })

watch的类型可以是\{ \[key: string\]: string | Function | Object | Array \}  
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。

data: {
        
        a: 1,
        b: 2,
        c: 3,
        d: 4,
        e: {
        
          f: {
        
            g: 5
          }
        }
      },
      watch: {
        
        a: function (val, oldVal) {
        
          console.log('new: %s, old: %s', val, oldVal)
        },
        // 方法名
        b: 'someMethod',
        // 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
        c: {
        
          handler: function (val, oldVal) {
         /* ... */ },
          deep: true
        },
        // 该回调将会在侦听开始之后被立即调用
        d: {
        
          handler: 'someMethod',
          immediate: true
        },
        e: [
          'handle1',
          function handle2 (val, oldVal) {
         /* ... */ },
          {
        
            handler: function handle3 (val, oldVal) {
         /* ... */ },
            /* ... */
          }
        ],
        // watch vm.e.f's value: {g: 5}
        'e.f': function (val, oldVal) {
         /* ... */ }
      }
    })
    vm.a = 2 // => new: 2, old: 1

注意，不应该使用箭头函数来定义 watcher 函数 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭头函数绑定了父级作用域的上下文，所以 this 将不会按照期望指向 Vue 实例，this.updateAutocomplete 将是 undefined  
有时候computed可以和watch配合使用，比如你要同时监听两个值得变化。可以这样写：

const vm = new Vue({
        
      el: '#demo3',
      data: {
        
        value1: '',
        value2: ''
      },
      computed: {
        
        doubleVal () {
        
          return {
        
            val1: this.value1,
            val2: this.value2
          }
        }    
      },
      watch: {
        
        doubleVal(v) {
        
         console.log(v) // 这里的v就包括两个值
        }
      }
    })

还有一点在开发可能会遇到，就是watch一个对象时，只有当给对象赋值了才触发watch，但我们需求是要在初始化对象时就触发，这个时候deep属性就派上用场了。

const vm = new Vue({
        
      el: '#demo4',
      data: {
        
        obj: {
        
          a: 1,
          b: 'test'
        }
      },
      watch: {
        
        obj: {
        
          handler(v) {
        
           console.log(v) // 不会执行
          }
        }
      }
    })
    const vm = new Vue({
        
      el: '#demo5',
      data: {
        
        obj: {
        
          a: 1,
          b: 'test'
        }
      },
      watch: {
        
        obj: {
        
          handler(v) {
        
           console.log(v) // {a: 1, b: 'test'}
          },
          deep: true
        }
      }
    })

但是这样会影响性能，使得对象某一个属性发生改变时vue就啊哟深度遍历整个对象，对每个属性都会触发handler函数，建议采用字符串形式监听

const vm = new Vue({
        
      el: '#demo6',
      data: {
        
        obj: {
        
          a: 1,
          b: ''
        }
      },
      watch: {
        
        'obj.a': {
        
          handler(v) {
        
           console.log(v) // 1
          }
        }
      }
    })

还有一个场景是当某个值初始化但watch没有监听到，然而我们同样需要立即监听，则immediate属性派上用场了。

const vm = new Vue({
        
      el: '#demo7',
      data: {
        
        say: 'hello world'
      },
      watch: {
        
        say: {
        
          handler(v) {
        
           console.log(v) // 不会执行
          }
        }
      }
    })
    const vm = new Vue({
        
      el: '#demo8',
      data: {
        
        say: 'hello world'
      },
      watch: {
        
        say: {
        
          handler(v) {
        
           console.log(v) // hello world
          },
          immediate: true
        }
      }
    })

watch在不用的时候需要注销它，在单文件组件销毁时vue会帮我们自动注销，但如果我们没在单文件组件使用，app.$watch调用后会返回一个值，就是unWatch方法，你要注销 watch 只要调用unWatch方法就可以了。

const unWatch = app.$watch('text', (newVal, oldVal) => {
        
      console.log(`${
          newVal} : ${
          oldVal}`)
    })
    unWatch() // 手动注销watch

[42cd8d7cd8b54214b54d3dd0bea788a3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/27/59139a914a9746b89653a52f9e12a83d.png