随笔分类 - vue
摘要：computed主要用来设置被多个数据影响的数据。可以不在data或prop中定义。 不能进行异步操作； 对计算值进行缓存，只有依赖数据更改后，才会重新计算； 可以设置get和set方法，默认是get方法。 watch主要设置能影响多个数据的数据，必须在data或prop中定义。 可以进行异步操作；
阅读全文
摘要：在之前，vue是通过Object.defineProperty来实现响应式的，但在vue3.0中，改为使用proxy实现 在我看来，Object.defineProperty有以下几个问题： 不能监听对象属性的新增和删除。只对获取和更改进行了处理。 通过索引更改数组对象不能被监听，如arr[1] =
阅读全文
摘要：vue和react已然是目前最受欢迎的前端开发框架，但公司依然有个项目使用的是jQuery开发。之前面试的时候，也有面试官问，什么项目适合使用jQuery开发呢？ jQuery jQuery无疑是将web开发带向标准化的领路人，兼容了各大浏览器，且包含了各种好用的插件。 但是jQuery体积大，不太
阅读全文
摘要：在vue中，默认通过template编写静态template来实现dom和state的关系。而react中使用JSX实现动态编译。各自有各自的好处与弊端。 template 使用静态模板的方式，很容易迁移到任何可以解析html结构的模板中。也可以很迅速地根据设计稿编写代码。 并且更易优化 JSX 使
阅读全文
摘要：插件的核心是install函数，第一个参数是Vue对象，第二个参数是options配置参数。当通过vue.use()调用插件时，即执行install方法 通过mixins创建全局插件 以下封装了一个数据验证的插件rules。通过在vue实例的$options中添加rules，实现对实例中data的监
阅读全文
摘要：<template> <div> <ul> <li v-for="item in list1">{{item}}</li> </ul> <ul> <li v-for="item in list2">{{item}}</li> </ul> <ol> <li v-for="item in list3">
阅读全文
摘要：vuex的存储是在内存中的，而localStorage是以文件的形式储存在本地，sessionStorage是临时存储的。 localStorage和sessionStorage只能存储字符串类型的数据，对于复杂对象类型，通过JSON.parse、JSON.stringfy来转换 vuex是进行组件
阅读全文
摘要：状态管理工具 state 存储状态，数据 mutations 当需要修改store中的数据时，不能直接对state进行修改，而要调用mutations中定义的方法进行修改。 function setNum(state, payload){ } this.$store.commit({type:'函数
阅读全文
摘要：在页面中，每个路由都对应着js文件。 在打包时，会把所有业务代码，也就是所有路由对应的代码，打包到一个文件中。这样会造成页面过于大的问题。每次从服务器请求时，会花费较长时间。 但是通过路由懒加载，将每个路由对应的组件打包成一个个的js代码块，只有在这个路由被加载到的时候，才执行这个相应代码块。 在v
阅读全文
摘要：只向服务器请求一次html+css+js代码。根据前端路由的映射关系，分离出不同路由对应页面的代码，进行渲染。 页面切换时，不会再向服务端发送请求
阅读全文
摘要：通过同一个组件模板可以创建多个组件实例，但是创建的组件实例是互不相关的。 也就是说，在某个组件实例中将数据更改了，在另一个组件实例中不应该被影响。这就是data作为函数的好处： data(){ return { msg:'hhh' } } 如上，每次创建的组件实例的数据，都是返回了一个新的对象。如果
阅读全文
摘要：在使用v-for指令时，官方建议对key进行绑定，之前在使用时都是将key绑定为index--索引，但是使用index是没有起到效果的。 使用key的作用： 当使用v-for遍历的数组更改时， 如：['a', 'b', 'c', 'd']的第二个位置插入'f' 在不使用key的情况下，更新时会将 b
阅读全文
摘要：vue利用“发布者 订阅者模式”和数据劫持实现双向数据绑定。 发布者 新建一个订阅者数组 遍历绑定数据的所有子属性，利用 对属性进行get、set的改写。 在get方法中，每当调用get，调用者就是订阅者，就添加这个订阅者到订阅者数组 addSub(dep.target)。并将数据返回。 在set方
阅读全文
摘要：vue router包含三种模式： history，通过history API 实现 hash，通过onhashChange事件实现 abstract hash模式实现原理 将mode更改为hash 设置a标签为跳转链接 js var aObjs = document.querySelectorAl
阅读全文
摘要：父组件向子组件传值 在父组件的子组件标签上，绑定属性，将传递参数作为属性值 <Father><Son :money = 'money' /> </Father> 在子组件的props属性中，声明从父组件传来的值 props:['money'] 如果想要对传来的参数进行验证，有两种方式 验证参数类型:
阅读全文
摘要：什么是生命周期函数？ 从对象的创建到销毁的过程中，都会经过一系列执行性函数。可以在这些函数中对每个时间点添加事件。 Vue的生命周期函数有八个： beforeCreate 此时实例已初始化，但是其中只包含生命周期函数和默认事件。此时数据和方法还未初始化，el也未确定。 created 此时实例创建完
阅读全文
