关于vue监听dom与传值问题
1. 代码初始化一次执行部分属性为空的情况
原因:
异步加载 + 立马 传值时
直接渲染 dom里面 能实时更新 (无影响)
不能直接dom中渲染(有影响) 解决方法:需要通过监听的方式来处理返回值
异步加载 + 过后点击 通过其他方法传值(如:vuex )
直接dom里面 能实时更新(无影响)
不能直接在dom中渲染(基本无影响)
异步加载 + v-if
直接dom里面 能实时更新(无影响)
不能直接在dom中渲染(无影响)
获取到vuex中的值 立马 传值问题
可以用计算属性
也可以在data中申明 然后在created 方法中取vuex中的值(直接在data里面取 是取不到的 为空 大概是渲染没那么快 从而推断出 传值也是在created 方法之后)
此步骤不为异步 所以子组件接收 计算属性跟data接收都可以
总结:父 =(异步)》子 js处理需要监听变化 而 直接传到dom中 dom本身就能实时监听
vuex getters 取值是在created 之后 传值也是在cerated之后 vuex取值不是异步
传值是否异步 直接dom中不用管 如果是js接收 并且异步的话 需要监听
关于vue监听dom与传值问题的更多相关文章
- JS监听DOM结构变化
在做一个微博的接入,需要判断微博是否被关注,要检查微博标签的DIV是否有“已关注”的字符,但这个DIV的内容是微博JSSDK动态生成.$("#id").html()是获取不到我想要 ...
- javascript 原生方法监听DOM结构改变事件
js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...
- vue监听滚动事件,实现滚动监听
在vue中实现滚动监听和原生js无太大差异,下面是一个简单的demo,可在控制台查看结果 <!DOCTYPE html> <html lang="en"> ...
- js动态监听dom变化
原生js 动态监听dom变化,根据不同的类型绑定不同的处理逻辑 // Firefox和Chrome早期版本中带有前缀 var MutationObserver = window.MutationO ...
- jQuery学习(监听DOM加载)
jQuery的extend方法 function njQuery() { } /* njQuery.extend = function (obj) { // 此时此刻的this就是njQuery这个类 ...
- vue 监听页面宽度变化 和 键盘事件
vue 监听页面窗口大小 export default { name: 'Full', components: { Header, Siderbar }, data () { return { scr ...
- MutationObserver 监听DOM树变化
1 概述 Mutation observer 是用于代替 Mutation events 作为观察DOM树结构发生变化时,做出相应处理的API.为什么要使用mutation observer 去代替 ...
- vue 监听对象里的特定数据
vue 监听对象里的特定数据变化 通常是这样写的,只能监听某一个特定数据 watch: { params: function(val) { console.log(val) this.$ajax.g ...
- Vue跨路由触发事件,Vue监听sessionStorage
近来,在做公司的聊天系统,引用的是极光的api.项目需求实时监听别人发过来的消息,进行渲染到页面,还有历史记录也要渲染,历史记录和实时聊天记录返回的结构体还不一样,看到需求的我欲哭无泪,首先登录是在首 ...
随机推荐
- MySQL存储过程实现动态执行SQL
--存储过程名和参数,参数中in表示传入参数,out标示传出参数,inout表示传入传出参数 create procedure p_procedurecode(in sumdate varchar(1 ...
- Linux下查看线程数的几种方法汇总
Linux下查看线程数的几种方法汇总 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Linux下查看某个进程的线程数量 pstree命令以树状图显示进程间的关系(display ...
- Centos 7最小化Mongodb部署操作
基本组件 mongodb-org mongodb-org-server mongodb-org-mongos mongodb-org-shell mongodb-org-tools 文件位置 /var ...
- jdk7 并行计算框架Fork/Join
故名思义,拆分fork+合并join.jdk1.7整合Fork/Join,性能上有大大提升. 思想:充分利用多核CPU把计算拆分成多个子任务,并行计算,提高CPU利用率大大减少运算时间.有点像,Map ...
- Nginx 简单安装
关于nginx的介绍:http://baike.baidu.com/link?url=UZjpP8y4MUgrjqACfxd7c3Cm4L8PnJsKkxSJQ3CrRcKZUjkkl4zGNs6Pr ...
- HDU 1014(互质数 **)
题意是说从 0 开始每次增加 STEP,然后模 MOD 得到一些数,问是否能得到从 0 到 MOD - 1 的所有数. 只要 STEP 与 MOD 互质就可以满足条件,也就是二者的最大公因数为 1 即 ...
- springBoot打包发布项目------jar包
这两年微服务很流行,这里简单介绍一下如何将自己使用idea写的微服务打包成一个可执行的jar包,并发布到linux服务器的步骤.因为spring boot有内置的tomcat所以一般使用内置的tomc ...
- 使用js修改url地址参数
该方法可以修改url的参数. 例如将 www.baidu.com 修改为 www.baidu.com?name=123 操作为: window.location.href = changeURLArg ...
- Vue.Draggable/SortableJS 的排序功能,在VUE中的使用
此插件git: https://github.com/SortableJS/Vue.Draggable 基于Sortable.js http://www.cnblogs.com/xiangsj/p/6 ...
- JDK源码之ArrayList
序言 ArrayList底层通过数组实现. ArrayList即动态数组,实现了动态的添加和减少元素 需要注意的是,容量拓展,是创建一个新的数组,然后将旧数组上的数组copy到新数组,这是一个很大的消 ...