1、通过prototype,这个非常方便。Vue.prototype[method]=method;
2、通过插件Vue.use(plugin);
3、通过mixin,Vue.mixin(mixins);
4、
// 创建全局方法 this.$root.$on('test', function(){ console.log('test'); }) // 销毁全局方法 this.$root.$off('test'); // 调用全局方法 this.$root.$emit('test');
找到config/index.js 配置文件,找build打包对象里的assetsPublicPath属性
默认值为/,更改为./就好了
最新的vue-cli 需要在根目录下建一个vue.config.js 在里面配置publicPath即可
因为动态添加src被当做静态资源处理了,没有进行编译,所以要加上require。
<img :src="require('@/assets/images/xxx.png')" />
keep-alive的生命周期
1.activated: 页面第一次进入的时候,钩子触发的顺序是created->mounted->activated
2.deactivated: 页面退出的时候会触发deactivated,当再次前进或者后退的时候只触发activated
不兼容ie8及以下,是因为vue的响应式原理是基于es5的Object.defineProperty的,而这个方法不支持ie8及以下。
部分兼容ie9 ,完全兼容10以上
2016年发布的vue2.0版本,区别:
1、 2.0生命生命周期变化感觉变得更加语义化一点(有规律可寻,更好记了),而且增加了beforeUpdate、updated、activated、deactivated,删除了attached、detached。
2、2.0将1.0所有自带的过滤器都删除了,也就是说,在2.0中,要使用过滤器,则需要我们自己编写
3、vue1.0的数据绑定完全依赖于数据侦测,使用Object.defineProperty方法使数据去通知相应watch,改变dom结构。vue2.0引入了虚拟dom,只通知到组件,提升了颗粒度。
需要使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。
作用:便于diff算法的更新,key的唯一性,能让算法更快的找到需要更新的dom(高效的更新虚拟DOM)
父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用
https://www.cnblogs.com/jin-zhe/p/9523029.html
Vue中子组件调用父组件的方法,这里有三种方法提供参考:
1:直接在子组件中通过this.$parent.event来调用父组件的方法
2:在子组件里用$emit向父组件触发一个事件,父组件监听这个事件
3:父组件把方法传入子组件中,在子组件里直接调用这个方法
https://www.cnblogs.com/jin-zhe/p/9523782.html
设置comments属性,官网默认为舍弃注释
<template comments> ... </template>
在 .vue 文件中,template是必须的,而script与style都不是必须的。都没有的话那就是一个静态网页
分为errorCaptured与errorHandler。
errorCaptured是组件内部钩子,可捕捉本组件与子孙组件抛出的错误,接收error、vm、info三个参数,return false后可以阻止错误继续向上抛出。
errorHandler为全局钩子,使用Vue.config.errorHandler配置,接收参数与errorCaptured一致,2.6后可捕捉v-on与promise链的错误,可用于统一错误处理与错误兜底。
https://blog.fundebug.com/2019/06/17/handling-errors-in-vuejs/
强制重新渲染
1.this.$forceUpdate()
2.v-if
强制重新刷新某组件
//模版上绑定key <SomeComponent :key="theKey"/> //选项里绑定data data(){ return{ theKey:0 } } //刷新key达到刷新组件的目的 theKey++;
如一个list中某一个数据发生变更时,
vue中会对整个list进行遍历, 判断使用到的某些属性是否发生变更, 从而更新发生变更的item
所以key属性才会显得很重要, 它会告诉你, 我那个item发生变更, 而不是去检测整个list
ajax是最早出现发送后端请求的技术,属于原生js范畴,核心是使用XMLHttpRequest对象,使用较多并有先后顺序的话,容易产生回调地狱。
fetch号称可以代替ajax的技术,是基于es6中的Promise对象设计的,参数和jQuery中的ajax类似,它并不是对ajax进一步封装,它属于原生js范畴。没有使用XMLHttpRequest对象。
axios不是原生js,使用时需要对其进行安装,客户端和服务器端都可以使用,可以在请求和相应阶段进行拦截,基于promise对象。
支持TypeScript
兼容IE11
双向数据绑定原理:
Vue2.x:其双向数据绑定原理是通过es5的Object.defineProperty,中的set方法来实现数据劫持的,但是有一个弊端就是无法兼听到数组内部的数据变化(当然我们可以通过arr = arr.concat([])),来实现内部数据变化的检测。相比Vue3有一定的性能问题。
Vue3.x:是用ES6的语法 Proxy(Proxy 怎么用大家可自行百度,网上教程大把,我就不在这赘述了)对象来实现的,这个玩意儿也可以实现数据的劫持,相比Object.defineProperty的优势是:可以检测到数组内部数据的变化
(IE系列都不兼容Proxy,所以可能还是用Object.defineProperty)
以什么后缀跟VUE没有任何关系,vue只是个特殊的text文件而已,就算你用 .abc 都行。
这一切都该归功于webpack,在webpack 的loaders配置中,能让你给指定文件一个,或多个加载器。你也可以把这些加载器理解为预编译工具。
module: { rules: [{ test: /\.vue$/, // 这里指定 .vue 文件通过 vue-loader 解析,你可以指定任何类型的文件。 loader: 'vue-loader', options: vueLoaderConfig }] }
v-for 的优先级更高
避免出现这种情况,如果实在需要,则在外嵌套template,在这一层进行v-if判断,然后在内部进行v-for循环,避免每次只有v-if只渲染很少一部分元素,也需要遍历同级的所有元素
watch不支持缓存,只要从新渲染就会执行,支持异步。
computed支持缓存,只有当缓存改变时才执行,不支持异步。
要使用 handler 和 immediate
//immediate设为true 监听方法会在创建的时候 执行handler里的方法 watch: { value:{ handler:function(o,n){}, immediate: true } }
父子Coms: 1/2/3 ..
兄弟Coms: 4/5
跨级Coms: 4/5/6/7
props
$emit/$on
( $parents/$children ) / $refs
Vuex
Bus
( provide/inject )
( $attrs/$listeners )
优点:
1.数据驱动
2.模块化
3.轻量级
4.SPA
5.版本3.0的界面化管理工具比较好使
6.vue易入门
7.中文社区强大,入门简单,提升也有很多的参考资料。
缺点:
1.吃内存(每个组件都会实例化一个Vue实例,实例的属性和方法很多)
2.定义在data里面的对象,实例化时,都会递归的遍历转成响应式数据,然而有的响应式数据我们并不会用到,造成性能上的浪费
3.像keep-alive transition transition-group 这些内置组件,不管用不用其实都已经挂到Vue.options.components上,如果不用,造成对象变大,从而占用内存
4.父子组件更新,没有明确的来源
5.不支持IE8及以下浏览器
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!