vue知识点总结

一、生命周期

1.1 生命周期总共有八个

beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted

1.2 页面一加载会执行哪些

beforeCreate、created、beforeMount、mounted

1.3 节点和数据

在mouted和mouted之后有节点、在created和created之后有数据

1.4 生命周期怎么用

created==>发送请求

mounted==>加载数据、写入插件(dom)、获取某些元素的高度值

三、keep-alive

组件创建销毁 切换

保留组件状态,避免组件内的数据重复渲染

组件切换、保存在内存中 

<keep-alive>

</keep-alive>

如果遇到二级路由访问页面

新闻                       社会 

   体育                        activated   deacctivated

       activated   deacctivated

activated(){

      this.$router.push(url)

}

beforeRouteLeave(){  //回到新闻 体育页面

       let url = this.$route.path

}

四、ref

  获取dom元素

<img ref="btn">

  this.$refs.btn

五、nextTick

获取dom元素的时候,数据改变了,视图未更新,dom操作是异步的  this.nextTick 解决dom操作 异步渲染问题

七、vuex

7.1 vuex有哪些属性

有五种,分别是 State、 Getter、Mutation 、Action、 Module

state => 基本数据(数据源存放地)

getters => 从基本数据派生出来的数据

mutations => 提交更改数据的方法,同步!

actions => 像一个装饰器,包裹mutations,使之可以异步。

modules => 模块化Vuex

7.2 vuex中mutations和actions的区别

mutations => 提交更改数据的方法,同步!

actions => 像一个装饰器,包裹mutations,使之可以异步。

八、computed和methods和watch区别

methods可以放函数

watch一进来不会执行,数据发生改变会执行

computed和methods一进来会执行

computed存在缓存 如果数据相同则会取缓存里的数据

methods不存在缓存 数据改变一次 执行一次

九、slot怎么用、在什么场景下用

通过插槽可以让用户可以拓展组件,去更好地复用组件

匿名插槽:子组件写占位符,父组件中没有固定名字的都会显示在slot占位符里面

具名插槽:子组件中name等于,和父组件中#等于相同的都会显示在slot占位符里

作用域插槽:父组件用v-slot、且不能与#等于共存

十、组件传值

父==>子props

子==>父emit

兄弟bus

十一、v-model双向绑定原理

数据变化更新视图,视图变化更新数据

十二、v-if和v-show的区别

对于不显示在页面上的元素来说 v-if直接不渲染

v-show 是 给了一个display:none css的内联样式来控制不显示

十三、mvvm

MVVM是Model-View-ViewModel的简写。它本质上就是MVC (Model-View- Controller)的改进版。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方式是:DOM 事件监听。这两个方向都实现的,我们称之为数据的双向绑定。

十四、样式穿透

>>> css 样式穿透   ::v-deep 作用于sass    /deep/ 作用于less

十五、scoped原理

实现组件私有化,当前style属性只作用于当前模块,给dom结构及css样式加了唯一标识 :data-v-469af010,缺点是更改起来增加代码量,它的唯一标识导致父组件无法操作子组件的样式。

十六、v-if和v-for的优先级

v-for>v-if

十七、vuex

状态管理、方便传值、方便操作

十八、v-if和v-show的区别

v-if和v-show的区别

对于不显示在页面上的元素来说 v-if直接不渲染

v-show 是 给了一个display:none css的内联样式来控制不显示

十九、nextTick



二十、for in 和 for of的区别

var arr = [1,2,3,4,5,6]

for(a in arr){

console.log(a)

}

输出0123456

var arr = [1,2,3,4,5,6]

for(a of arr){

console.log(a)

}

输出123456

二十一. 说一下你在vue中踩过的坑(必会)

 在created操作dom的时候,是报错的,获取不到dom,这个时候实例vue实例没有挂载【解决办法】通过:Vue.nextTick(回调函数进行获取)

二十二.路由

22.1路由之间是怎么跳转的?有哪些方式

1、<router-link to="需要跳转到页面的路径">

2、this.$router.push()跳转到指定的url,并在history中添加记录,点击回退返回到上一个页面

3、this.$router.replace()跳转到指定的url,但是history中不会添加记录,点击回退到上上个页面

4、this.$touter.go(n)向前或者后跳转n个页面,n可以是正数也可以是负数

22.2 怎么配置路由

1.在main.js中导入router,并使用

2.配置路由path和组件,生成路由对象

3.页面使用<router-view>承载组件

22.3 路由配置项常用的属性及作用

1.path : 跳转路径 component : 路径相对于的组件 name:命名路由 children:子路由的配置参数(路由嵌套) props:路由解耦 redirect : 重定向路由

22.4 vue-router 钩子函数

1.写在router.js中的钩子函数

beforeEnter:(to,from,next)=> {

console.log(to)//将要跳转的路径信息

    console.log(from)//跳转前的路径信息

    next()//路由的控制参数

},

2.写在模板中的钩子函数

beforeRouteEnter在路由进入前的钩子函数

beforeRouteUpdate在路由改变,该组件被复用时

beforeRouteLeave在路由离开前的钩子函数

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,386评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,142评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,704评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,702评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,716评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,573评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,314评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,230评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,680评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,873评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,991评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,706评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,329评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,910评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,038评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,158评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,941评论 2 355

推荐阅读更多精彩内容

  • vue.jsjavascript 看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就...
    Leson17阅读 2,809评论 0 13
  • 看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,...
    lessonSam阅读 296评论 0 4
  • .什么是vue生命周期 Vue 实例从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过...
    酷酷的凯先生阅读 4,331评论 0 3
  • Vue 双向绑定原理 mvvm 双向绑定,采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defin...
    柠檬与断章阅读 862评论 0 3
  • 1.Vue的生命周期 Vue的生命周期主要分为几个简单,数据初始化,dom挂载,数据更新,组件卸载,在一个就是开启...
    淺時咣阅读 965评论 0 10