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

组件创建销毁 切换

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

组件切换、保存在内存中 

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

新闻                       社会 

   体育                        activated   deacctivated

       activated   deacctivated

activated(){

      this.$router.push(url)

}

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

       let url = this.$route.path

}

四、ref

  获取dom元素

  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、

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.页面使用承载组件

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在路由离开前的钩子函数

你可能感兴趣的:(vue知识点总结)