Vue深入(1)

最新推荐文章于 2025-05-08 14:32:06 发布

原生JS永远滴神

最新推荐文章于 2025-05-08 14:32:06 发布

阅读量113

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： vue

本文链接：https://blog.youkuaiyun.com/timeares/article/details/120523094

笔记专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了Vue.js中的数据驱动理念，MVVM架构模式以及其核心要素——计算属性和监听器（watch）。计算属性提供缓存功能，只在依赖变化时更新。watch用于执行异步操作或响应多个值变化。此外，还阐述了Vue组件的生命周期，包括挂载、更新和销毁阶段。组件化是提升代码复用性的关键，而路由缓存利用`<keep-alive>`可以优化用户体验。最后，讨论了Vue的hash模式与history模式，并提到了在history模式下可能遇到的问题及其解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据驱动理念

简单的来说，当数据发生变化时，页面也会跟着变化，开发者不需要手动修改dom

MVVM

M：modal：数据 V：view 视图 ViewModal：数据和视图连接的桥梁（实例化）
MVVM三要素：

计算属性

好处：有缓存的效果。当一个计算属性所依赖的数据发生变化时，他才会重新获取值
作用：计算的结果会被缓存，除非依赖的响应式prototype发生变化才会计算+
注意：如果某个依赖（非prototype）在该实例范畴之外，数据不会自动更新，示例如下：

var vm = new Vue({
  data: { a: 1 },
  computed: {
    // 仅读取
    aDouble: function () {
      return this.a * 2
    },
    // 读取和设置
    aPlus: {
      get: function () {
        return this.a + 1
      },
      set: function (v) {
        this.a = v - 1
      }
    }
  }
})
vm.aPlus   // => 2
vm.aPlus = 3
vm.a       // => 2
vm.aDouble // => 4

watch和computed

watch：执行异步操作或较大开销的操作，一个值影响多个值的变化
computed：多个值影响一个值的变化
由于computed有缓存所以在实际操作中两个都能使用的时候优先考虑computed

生命周期函数

挂载：

beforeCreate
created
beforeMount
mounted

更新：（元素或组件发生变化操作）

beforeUpdate
updated

销毁：

beforeDestory
destoryed

图解
在这里插入图片描述
在组件中关于data不是一个对象，而是一个函数的原因，官方文档有明确的说明

组件化理解

定义：组件是可复用的实例
应用场景：

通用型组件：实现最基本的功能，具有通信性和可复用性
业务组件：用于完成具体的业务功能
页面组件：页面中的内容应该放在独立的组件中，根据需求进行切换

路由组件缓存

<keep-alive include="要进行缓存路由的名称" ><router-view/></keep-alive>

注意：要设置缓存的路由时候在定义router下的路由规则需要设置name属性 name的值和上面include的值一样
keep-alive有两个钩子函数：activated，deactivated
activated：执行时机为当a页面跳转到b页面（必须是缓存页面）的时候触发用来执行需要更新的数据
deactivated：执行时机从b页面跳出的时候执行
点击刷新后执行的钩子函数：created—>mounted—>activated
应用场景：当从商品列表页面跳转到商品详情页面，在点击返回的时候数据并没有发生变化要展示的还是原来的数据的情况下可以使用路由缓存

hash模式与history模式

设置方式默认为hash模式
要设置为history模式只需要在配置路由的地方加一个mode属性值为history 就ok了
注意：history模式存在问题在初次加载的时候页面没有问题，是由于第一次加载的时候是调用的h5中的history.pushState()加载，但是在刷新之后，前端会发送请求，后端是没有接口只是加载了静态资源的数据，只是将index.html返回，解决方式为导入connect-history-api-fallback 然后使用express的use中间件启用

const app = express()
const history = require("connect-history-api-fallback")
app.use(history())

nginx配置history路由模式原理及方法

在这里插入图片描述

错误识别处理

在这里插入图片描述
出现这种错误的原因是因为 vue有运行时版本和完成时版本运行时版本不支持template模板语法只有完成版本才支持template模板语法，完成时版本比运行时版本大10k左右
解决方式：两种

设置vue.config.js文件的runtimepiler的值为true 将运行时版本改变为完整版（本质上也是通过构建render函数的方式不过是自动转换不需要人为动手）
通过构建render函数的方式解决

 // template: `<a :href="to" ><slot></slot></a>`
      // 通过构建render函数的方式解决运行时版本不能解析template模板问题
      render(h) {
        // h有三个参数 
        //第一个参数 要创建的标签名，
        //第二个参数 要创建标签的属性 是一个对象 ， 
        //第三个参数 要创建标签前中嵌套的标签 是一个数组
         return h("a", {
          attrs: {
            href: this.to
          }
        },
        // 获取匿名slot的方式 为 this.$slot.default
        [this.$slots.default])
      }