vue相关
sunxya
这个作者很懒,什么都没留下…
展开
-
vue---hash模式和history模式的区别
1、hash模式和history模式的区别表现形式的区别hash模式路径中带#,#后内容作为路由地址history模式正常路径 需要服务端配置支持原理的区别hash模式基于锚点,以及onhaschange事件,根据路由地址不同呈现不同内容history模式基于HTML5中的history API- history.pushState() IE10以后支持- history.replaceState()2、history 模式的使用需要服务器的支持单页面应用中,服务端不存在原创 2021-03-11 17:17:06 · 250 阅读 · 0 评论 -
vue---响应式相关问题
1、给属性重新赋值成对象,是否是响应式的是响应式的。比如当我们把data的msg重新设置成对象的时候,因为msg在data中定义过,所有msg是响应式的,当重新设置msg的值得时候会触发observer中的set方法,在set方法中首先记录下新的值,然后会调用that.walk方法,walk 方法中会遍历对象中的所有属性,重新把他变成响应式数据。2、给vue实例新增一个成员,是否是响应式的?不是响应式的data中的属性是在new Vue的时候转变为响应式数据的,在Vue的构造函数中,会创建一原创 2021-02-18 22:26:47 · 203 阅读 · 0 评论 -
snabbdom、虚拟Dom、diff算法、
patch函数的整体过程分析patch(oldVnode,newVnode)把新节点中变化的内容渲染到真实DOM,最后返回新节点作为下一次处理的旧节点对比新旧VNode是否相同节点(节点的key和sel相同)如果不是相同节点,删除之前的内容,重新渲染如果是相同的节点,再判断新的VNode是否有text,如果有并且和oldVnode的text不同,直接更新文本内容如果新的Vnode有children,判断子节点是否有变化 -------diff算法的核心 updateChildrenDiff原创 2021-02-10 12:22:58 · 106 阅读 · 0 评论 -
vue---手写vue-router
vue的构建版本运行时版本:不支持template模板,需要打包时提前编译 编译时把template转换成render函数运行时使用完整版vue 在根目录下创建一个vue.config.js文件,将runtimeCompiler设置为truemodule.exports={ //选项... runtimeCompiler:true}完整版:包含运行时和编译器,体积比运行时版本大10K左右,程序运行时把模板转换成render函数vue-cli使用的是运行时版本如何切换完整版vue原创 2021-01-27 17:37:16 · 80 阅读 · 0 评论 -
vue---vue中mixin的用法详解
vue中提供了一种混合机制–mixins,用来更高效的实现组件内容的复用。最开始我一度认为这个和组件好像没啥区别。。后来发现错了。下面我们来看看mixins和普通情况下引入组件有什么区别?区别组件在引用之后相当于在父组件内开辟了一块单独的空间,根据父组件props传递过来的值进行相应的操作,单本质上来讲,两者还是泾渭分明,相对独立的而mixin则是在引入组件之后,将组件内的内容如:data、methods等属性方法与父组件相应内容合并。相当于在引入之后,父组件的各种属性方法被扩充了。单纯原创 2021-01-27 15:47:39 · 578 阅读 · 0 评论 -
vue---vue-router,动态路由,编程式导航
1、在router/index.js中注册路由插件Vue.use(VueRouter)定义路由规则const routers=[ { path:'/', name:'Index', component:Index }, { path:'/blog', name:'Blog', //懒加载 用到的时候再加载 优化性能 component:()=>import(/* webpackChunkName:'blog' */ '../views/Blog.vu原创 2021-01-27 11:21:29 · 124 阅读 · 0 评论 -
vue---父子组件间的数据传递,非父子组件间的数据传递
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> //父组原创 2021-01-25 23:19:21 · 91 阅读 · 0 评论 -
vue---事件绑定 修饰符 组件使用的小tips
事件绑定修饰符var vm=new Vue({ el:"#app", methods:{ //1、@click绑定点击事件@click="handelClick" //如果用@click="handelClick($event,a,b,c)"可以传参 handelClick:function(e,one,two,three){ } }, //2、@click.preven修饰符 阻止事件的默认行为 //原创 2021-01-25 11:44:19 · 71 阅读 · 0 评论 -
vue---计算属性,方法和侦听
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"> {{fu原创 2021-01-23 22:31:35 · 53 阅读 · 0 评论 -
vue---生命周期钩子
//生命周期函数就是vue实例再某一个时间点会自动执行的函数 var vm=new Vue({ el:"#app", //1、beforeCreate //创建一个vue实例的时候 初始化事件和生命周期相关的内容结束的时候 //数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 beforeCreate:function(){ }, //2、created //数据观测 (data原创 2021-01-23 22:08:09 · 63 阅读 · 0 评论