![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
喂维围
一个三流大学生的成长历程
展开
-
父组件传递对象,不写key会自动解耦
v-bind = “obj” obj = { name: 'xiaoming', age: 22}原创 2021-01-29 18:02:26 · 106 阅读 · 0 评论 -
vuex监听数组无法更新
vuex中的state是存在内存里,以一种方式进行全局注入通过取值的方法,this.$store.state可以看出,在vue中创建了一个state对象。而我们的vue2中对数组的双向绑定时通过对数组的操作方法进行重写。所以有些情况无法监听解决方式1深拷贝一个新的数组,并重新赋值给旧的数组2vue.$set()...原创 2020-12-14 14:48:41 · 470 阅读 · 0 评论 -
浅析vue3.0中的Proxy双向绑定
Vue2.0中的双向绑定使用object.defineProperty()进行双向绑定缺点:1无法对数组进行监听,采用的是对数组的方法进行重写(push, pop,shift,unshift等等)。对此进行双向绑定和数据监听的操作2效率差,这主要是因为对多层数据进行一次性的递归操作,如果数据很多或者是很深层次,这样性能非常的差3因为局限性,无法对新加/删除的数据进行监听,所以使用在vue2.0中使用$set进行手动添加所以在vue3.0中使用的proxy代理的方式进行解决使用proxy和Ref原创 2020-11-04 10:49:34 · 941 阅读 · 0 评论 -
浅析vue的服务端渲染
1首屏和白屏的区别2 SSR和预渲染3 防止数据交叉感染(采用工厂模式)4 在服务端上,不需要转化为响应式对象(节省开销)5 由于是没有动态更新的,所以在服务端中只会调用beforeCreate和created生命周期。其他的生命周期只在客户端执行6 “通用代码中”,在服务端不接受window或document这种浏览器变量7 我们为了防止数据污染,应该避免单例模式,而是暴露一个工厂函数,当每次请求的时候,我们都调用工厂函数来创建一个实例8 打包会生成“服务端bundle”和“客户端bun原创 2020-10-30 12:00:00 · 245 阅读 · 0 评论 -
学习webpack,按照webpack官网指南,一步步的操作!!!
webpack官方指南知识点1:使用一个空的文件夹(webpack-demo),npm init生成package.json不要使用脚手架vue-cli生成的vue项目知识点2:使用npm中的-D,-S,-g分别是什么?知识点3:npx和npm中的区别?知识点4:npm语句的原理?...原创 2020-10-21 16:25:05 · 174 阅读 · 0 评论 -
从import开始,手撕vue-router
首先,我们先来介绍一下两种不同的模式hash和history模式hash,就是url中#后面的字符串,因为我们是使用单页面应用,所以我们把hash值和页面进行一一对应,实现页面的跳转和切换。并且,我们对url的hash值进行实时监听。history,就是操控history的API,实现对历史记录的操作,例如回退,前进等。主要是使用history.pushState(data, title [, url]):往历史记录堆栈顶部添加一条记录;这个API来完成跳转,且无需加载页面。但是,history模式需原创 2020-09-26 13:27:59 · 147 阅读 · 0 评论 -
vue中视图不更新
在一个很深层次的对象中,改变其中一个属性或者是在一个对象中新添加了一个属性。改变了之后,不会更新视图使用this.$forceUpdate();https://blog.csdn.net/bigbear00007/article/details/102594645原创 2020-08-29 14:49:39 · 320 阅读 · 0 评论 -
vue的provide无法监听变化
vue中的provide可以进行父组件向后代组件进行传值。但是,他没办法监听传输数据的变化。或者说明白点,就是如果我在父组件改变注入的值,它没办法更新。子组件改变传入的值,它也没办法进行更新上图,vue官方例子说明但是这个一个可监听的对象,那么其对象的属性是可响应的是啥意思?可监听的对象,是vue中data中的数据,并且data中的数据是一个对象,如图。那监听他的属性,就是监听testA里面的b值当b的值改变的时候,这个是可以监听到的看上面,显示的是2b2b2b,而不是初始值bbb了所原创 2020-08-20 18:12:10 · 3023 阅读 · 0 评论 -
vue中的自定义指令
vue中我们常见的指令有很多,v-if,v-model等等那我们对指令的拓展,还有这自定义指令。它可以是全局的,也可以是局部的全局的我们可以在入口处main.js中进行定义使用后台console打印的结果对于各种属性的介绍,看官网声明钩子函数声明钩子函数中的参数好的,那声明钩子函数的作用可以自己体会,选用。那么我们参考v-model,v-html,v-if。他其实是给我们绑定的dom上增加额外的操作,是我们声明指令的一种拓展...原创 2020-08-20 14:49:53 · 106 阅读 · 0 评论 -
vue中webpack配置理解
webpack:本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。这是官网上的解析,翻译成人话就是:webpack是一个静态资源的打包器首先,它会找到一个入口entry,从这个文件开始进行递归操作,把所有的依赖关系屡清楚,变成一个网状的结构之后,在编译原创 2020-08-15 15:59:31 · 932 阅读 · 0 评论 -
vue设计模式
vue是一个渐进式的框架那什么是渐进式???渐进式,简单翻译一下就是主键做加法的模式原创 2020-08-06 15:16:38 · 6380 阅读 · 0 评论 -
vue中key的作用
key的作用1在渲染列表的时候使用key,如果不使用的时候会进行警告。当v-for循环渲染时,不加上key的时候会默认采用原地复用原则。即,不会移动或重新渲染dom元素或者标签,而是单纯的改变数据,对数据进行更新。典型的例子为for循环input标签,删除或者新增一个input,而其中填写的数据依旧在原来标签的下标位置上。注意:保证一个父元素下,所有的子元素有着不同的key。在for循环的时候,最好都加上key属性,这样可以提高渲染的效率,提高页面的性能。key的值最好不要使用index(下标),有的原创 2020-06-27 12:34:09 · 1614 阅读 · 0 评论 -
vue中dom-diff算法
虚拟dom的概念可以把Virtual DOM 理解为一个简单的JS对象,并且最少包含标签名( tag)、属性(attrs)和子元素对象( children)三个属性。不同的框架对这三个属性的命名会有点差别。总而言之,虚拟dom就是用js对象来描述dom节点单纯的使用虚拟dom并不能优化性能,因为diff算法需要进行大量的比较。虽然减少了dom操作和渲染,但是大大增加了比较时运算的cup的计算负担。所以,虚拟dom配合着优化之后的diff算法,才能最大程度上的优化渲染。1.4 diff算法diff算法原创 2020-06-27 12:32:06 · 1280 阅读 · 0 评论 -
vue模板渲染
把template中的模板使用vue-template-complier进行编译,模板通过编译生成AST,再由AST生成Vue的渲染函数,render函数中使用到了js中的with方法,其中返回一个createElement函数(h函数)。createElement中接收三个参数,标签,属性(class,id,style),子元素例如:render(){ with(this){ return createElement(param1,param2,param2); }}模板渲染的三个.原创 2020-06-27 12:28:45 · 1013 阅读 · 0 评论