VUE重点问题总结


Posted in Javascript onMarch 19, 2018

1、组件三种挂载方式

自动挂载

var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

手动挂载

// 可以实现延迟按需挂载
<div id="app"> {{name}} </div> 
<button onclick="test()">挂载</button> 
<script> 
 var obj= {name: '张三'} 
 var vm = new Vue({ 
 data: obj
 }) 
 function test() { 
 vm.$mount("#app"); 
 }
// Vue.extend()创建没有挂载的的子类,可以使用该子累创建多个实例
var app= Vue.extend({ 
 template: '<p>{{message}}</p>', 
 data: function () { 
 return { 
  message: 'message'
  } 
 } 
 }) 
 new app().$mount('#app') // 创建 app实例,并挂载到一个元素上

2、路由传递参数的方式

<p>
  <!-- query要用path来引入,params要用name来引入,故不能写为 :to="{path:'/login',params: {isLogin: true}} -->
  <!-- 跳转路由时用this.$router: this.$router.push({name:"login",params:{isLogin:true}});this.$router.push({path: '/login', query: {isLogin : true}}); -->
  <!-- 接收参数时用this.$route: this.$route.query.isLogin 和 this.$route.params.isLogin; -->
  <router-link :to="{name:'login',params: {isLogin: true}}">亲,请登录</router-link>
  <router-link :to="{name:'login',params: {isLogin: false}}">免费注册</router-link>
 </p>
 <!-- 路由出口, 路由匹配到的组件将渲染在这里 -->
 <router-view></router-view>

3、对render:h => h(App)的理解

render:h=>h(App)是ES6中的箭头函数写法,等价于render:function(h){return h(App);}.

1.箭头函数中的this是 指向 包裹this所在函数外面的对象上。

2.h是creatElement的别名,vue生态系统的通用管理

3.template:‘<app/>',components:{App}配合使用与单独使用render:h=>h(App)会达到同样的效果

前者识别<template>标签,后者直接解析template下的id为app的div(忽略template的存在)

new Vue({
 el: '#app', // 相当于 new Vue({}).$mount('#app');
 template: '<App/>', // 1、可以通过在 #app 内加入<app></app>替代 2、或者 通过 render: h => h(App) 渲染一个视图,然后提供给el挂载
 components: { // vue2中可以通过 render: h => h(App) 渲染一个视图,然后提供给el挂载
  App
 }
});

4、Vue.nextTick()的理解

与DOM相关操作写在该函数回调中,确保DOM已渲染

nextTick的由来:

由于VUE的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新。

nextTick的触发时机:

在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(callback)内的回调。

应用场景:

需要在视图更新之后,基于新的视图进行操作。

在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中。原因是什么呢,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。

在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。

简单总结事件循环:

同步代码执行 -> 查找异步队列,推入执行栈,执行callback1[事件循环1] ->查找异步队列,推入执行栈,执行callback2[事件循环2]...即每个异步callback,最终都会形成自己独立的一个事件循环。结合nextTick的由来,可以推出每个事件循环中,nextTick触发的时机:

Javascript 相关文章推荐
Javascript 函数中的参数使用分析
Mar 27 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
Jun 14 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
Apr 11 Javascript
jquery 倒计时效果实现秒杀思路
Sep 11 Javascript
使用jQuery实现返回顶部
Jan 26 Javascript
浅谈javascript事件取消和阻止冒泡
May 26 Javascript
分享JS代码实现鼠标放在输入框上输入框和图片同时更换样式
Sep 01 Javascript
JavaScript实现url参数转成json形式
Sep 25 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
javascript实现简易数码时钟
Mar 30 Javascript
p5.js入门教程之键盘交互
Mar 19 #Javascript
vue 实现的树形菜的实例代码
Mar 19 #Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
Mar 18 #Javascript
jQuery替换节点元素的操作方法
Mar 18 #jQuery
使用Angular CLI生成 Angular 5项目教程详解
Mar 18 #Javascript
分析javascript原型及原型链
Mar 18 #Javascript
jquery 实现拖动文件上传加载进度条功能
Mar 18 #jQuery
You might like
怎样在UNIX系统下安装php3
2006/10/09 PHP
IP138 IP地址查询小偷实现代码
2010/02/15 PHP
ThinkPHP Mobile使用方法简明教程
2014/06/18 PHP
PHP缓存机制Output Control详解
2014/07/14 PHP
浅谈PHP的数据库接口和技术
2016/12/09 PHP
javscript对象原型的一些看法
2010/09/19 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
深入理解JavaScript的React框架的原理
2015/07/02 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
2015/12/13 Javascript
AngularJS教程之环境设置
2016/08/16 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
使用AngularJS2中的指令实现按钮的切换效果
2017/03/27 Javascript
Javascript实现时间倒计时效果
2017/07/15 Javascript
vue实现文件上传功能
2018/08/13 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
JavaScript中的null和undefined用法解析
2019/09/30 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
[04:03]2014DOTA2西雅图国际邀请赛 LGD战队巡礼
2014/07/07 DOTA
[39:52]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第一场
2018/04/04 DOTA
使用python将mdb数据库文件导入postgresql数据库示例
2014/02/17 Python
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
浅谈Python基础之I/O模型
2017/05/11 Python
Python交互环境下实现输入代码
2018/06/22 Python
python实现京东秒杀功能
2018/07/30 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
python 2.7.13 安装配置方法图文教程
2018/09/18 Python
解决python中使用PYQT时中文乱码问题
2019/06/17 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python操作redis和mongoDB的方法
2019/12/19 Python
Pandas的数据过滤实现
2021/01/15 Python
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
商场经理竞聘演讲稿
2014/01/01 职场文书
大学同学聚会邀请函
2014/01/29 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
Python实现排序方法常见的四种
2021/07/15 Python
MySQL限制查询和数据排序介绍
2022/03/25 MySQL