Vue 问题总结

1：Vue的生命周期，钩子函数？

答：beforecreated : 可以在这加个loading事件
        created ：在这结束loading，还做一些初始化，实现函数自执行
        mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
        beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容

生命周期钩子函数

beforeCreated()：el,data并未初始化时触发

created()：data初始化完成，el没有初始化时，触发

beforeMount()：el,data初始化完成触发

mounted()：完成挂载，页面成功渲染触发

beforeUpdate(): 视图层的数据改变前触发，即data数据变动，视图层还未改变时

Updated(): 视图层数据改变后触发

beforeDestroy()：页面销毁前触发

destroyed()：页面销毁后触发

2：父子传值?

父传子：是在子组件标签内通过v-bind属性绑定父组件内的值，在子组件中，通过props属性获取子组件的值,props的值是一个数组，里面的字符串元素就是绑定的属性名，在子组件内可以直接通过插值表达式获得父组件传过来的值

子传父：子组件内通过触发一个事件，通过函数内this.$emit(‘传给父组件内的事件名’,值)的方法,在父组件的子组件标签内设置@传过来的事件名=“父组件内的方法”,父组件的方法函数中，形参会接收从子组件传过来的参数

兄弟组件：通过新建一个中间的Vue实例newVue对象，要传值的组件内注册一个事件，通过 newVue.$emit(‘传递的事件名’,值)方法，然后再需要接收兄弟组件值得组件里，在mounted()钩子函数内设置newVue.$on(‘传递过来的事件名’, data=>this.xx=data),获取值

问：vuex设置全局的，有没有什么安全问题

答：有安全问题，用户这样可以在控制台中获取到Vuex中的数据(vue devTools插件可以直接查看vuex的数据)，那么在控制台就可以通过this.$vm.$store对象来修改store里的值，获取一些权限

3：vue中用什么发送异步请求

答：基于Promise语法的axios.js或者vue-resourse.js

就是jq中的ajax

4：说一下MVVM思想

答：本质上是MVC的改进，

M-->Model层，数据层，VUE实例里的data对象

V-->View层，就是视图层，就是页面

VM-->ViewModel层

Model层的数据改变，VM层会感知到变化，是View层做出相应改变

View层发生变换，VM同样也会感知到，通知Model层发生变化

这也是双向数据绑定的概念

5：Vue中get，post，jsonp

答：通过axios.js可以使用get, post请求，没有jsonp请求

    Vue-resourse.js有jsonp请求

6：Vue了解过吗？使用vue做过哪些项目？

答: 肯定答了解过，项目需要自己找

7：Vuex了解过吗？

答：状态管理模式、集中式存储管理 一听就很高大上，蛮吓人的。

在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件中供其他组件使用。这么说吧，将vue想作是一个js文件、组件是函数，那么vuex就是一个全局变量，只是这个“全局变量”包含了一些特定的规则而已。

在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，不过在使用vuex之后也带来了更多的概念和框架，需慎重！

注意：并不是Vuex一定是好的，如果页面不复杂，可以不需要用Vuex，简单的组件传值就可以了

8：ajax和axios的区别以及axios的好处

答：JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理，基于原生XHR开发，XHR本身架构不清晰。ajax处理回调麻烦。

Axios只是一个单独的js文件，文件小，模块化开发思想

Axios基于Promise语法，提供了一些并发请求的接口，可以同时处理大量异步操作

Axios自动转换JSON数据

Axios在客户端支持防止CSRF/XSRF

9：v-if和v-show的区别，vue如何绑定数据

答: v-if值是false是删除这个元素

   v-show值是false是设置display:none

   一般如果是异步数据进行渲染的时候用v-if

   操作大量dom的时候用v-show

  数据绑定： {{ }}，v-text, v-html, v-bind,v-cloak,v-once,v-for,v-on....

10：路由传值  

答：①通过路由配置中的name属性，在组件中{{$route.name}}

    ②通过路由带参数进行传值

两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

在B组件中获取A组件传递过来的参数

this.$route.query.orderId

③通过<router-link>标签中的to传参

<router-link :to="{name:'hi1',params:{username:xxx}}">跳转到B页面</router-link> //A页面

{path:'/xxxxx',name:'hi1',component:组件名} //路由配置

$route.params.uesrname  //B页面中接收A页面传过来的值

④利用url传递

{

    path:'/params/:newsId/:newsTitle',

     component:Params

}  //路由配置 我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值

在跳转后的页面使用$route.params.newsId 和 $route.params.newsTitle来获取通过url传递过来的值

Vue 问题总结

1：Vue的生命周期，钩子函数？

答：beforecreated : 可以在这加个loading事件
        created ：在这结束loading，还做一些初始化，实现函数自执行
        mounted ： 在这发起后端请求，拿回数据，配合路由钩子做一些事情
        beforeDestroy： 你确认删除XX吗？ destroyed ：当前组件已被删除，清空相关内容

生命周期钩子函数

beforeCreated()：el,data并未初始化时触发

created()：data初始化完成，el没有初始化时，触发

beforeMount()：el,data初始化完成触发

mounted()：完成挂载，页面成功渲染触发

beforeUpdate(): 视图层的数据改变前触发，即data数据变动，视图层还未改变时

Updated(): 视图层数据改变后触发

beforeDestroy()：页面销毁前触发

destroyed()：页面销毁后触发

2：父子传值?

父传子：是在子组件标签内通过v-bind属性绑定父组件内的值，在子组件中，通过props属性获取子组件的值,props的值是一个数组，里面的字符串元素就是绑定的属性名，在子组件内可以直接通过插值表达式获得父组件传过来的值

子传父：子组件内通过触发一个事件，通过函数内this.$emit(‘传给父组件内的事件名’,值)的方法,在父组件的子组件标签内设置@传过来的事件名=“父组件内的方法”,父组件的方法函数中，形参会接收从子组件传过来的参数

兄弟组件：通过新建一个中间的Vue实例newVue对象，要传值的组件内注册一个事件，通过 newVue.$emit(‘传递的事件名’,值)方法，然后再需要接收兄弟组件值得组件里，在mounted()钩子函数内设置newVue.$on(‘传递过来的事件名’, data=>this.xx=data),获取值

问：vuex设置全局的，有没有什么安全问题

答：有安全问题，用户这样可以在控制台中获取到Vuex中的数据(vue devTools插件可以直接查看vuex的数据)，那么在控制台就可以通过this.$vm.$store对象来修改store里的值，获取一些权限

3：vue中用什么发送异步请求

答：基于Promise语法的axios.js或者vue-resourse.js

就是jq中的ajax

4：说一下MVVM思想

答：本质上是MVC的改进，

M-->Model层，数据层，VUE实例里的data对象

V-->View层，就是视图层，就是页面

VM-->ViewModel层

Model层的数据改变，VM层会感知到变化，是View层做出相应改变

View层发生变换，VM同样也会感知到，通知Model层发生变化

这也是双向数据绑定的概念

5：Vue中get，post，jsonp

答：通过axios.js可以使用get, post请求，没有jsonp请求

    Vue-resourse.js有jsonp请求

6：Vue了解过吗？使用vue做过哪些项目？

答: 肯定答了解过，项目需要自己找

7：Vuex了解过吗？

答：状态管理模式、集中式存储管理 一听就很高大上，蛮吓人的。

在我看来 vuex 就是把需要共享的变量全部存储在一个对象里面，然后将这个对象放在顶层组件中供其他组件使用。这么说吧，将vue想作是一个js文件、组件是函数，那么vuex就是一个全局变量，只是这个“全局变量”包含了一些特定的规则而已。

在vue的组件化开发中，经常会遇到需要将当前组件的状态传递给其他组件。父子组件通信时，我们通常会采用 props + emit 这种方式。但当通信双方不是父子组件甚至压根不存在相关联系，或者一个状态需要共享给多个组件时，就会非常麻烦，数据也会相当难维护，这对我们开发来讲就很不友好。vuex 这个时候就很实用，不过在使用vuex之后也带来了更多的概念和框架，需慎重！

注意：并不是Vuex一定是好的，如果页面不复杂，可以不需要用Vuex，简单的组件传值就可以了

8：ajax和axios的区别以及axios的好处

答：JQuery整个项目太大，单纯使用ajax却要引入整个JQuery非常的不合理，基于原生XHR开发，XHR本身架构不清晰。ajax处理回调麻烦。

Axios只是一个单独的js文件，文件小，模块化开发思想

Axios基于Promise语法，提供了一些并发请求的接口，可以同时处理大量异步操作

Axios自动转换JSON数据

Axios在客户端支持防止CSRF/XSRF

9：v-if和v-show的区别，vue如何绑定数据

答: v-if值是false是删除这个元素

   v-show值是false是设置display:none

   一般如果是异步数据进行渲染的时候用v-if

   操作大量dom的时候用v-show

  数据绑定： {{ }}，v-text, v-html, v-bind,v-cloak,v-once,v-for,v-on....

10：路由传值  

答：①通过路由配置中的name属性，在组件中{{$route.name}}

    ②通过路由带参数进行传值

两个组件 A和B,A组件通过query把orderId传递给B组件（触发事件可以是点击事件、钩子函数等）

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) // 跳转到B

在B组件中获取A组件传递过来的参数

this.$route.query.orderId

③通过<router-link>标签中的to传参

<router-link :to="{name:'hi1',params:{username:xxx}}">跳转到B页面</router-link> //A页面

{path:'/xxxxx',name:'hi1',component:组件名} //路由配置

$route.params.uesrname  //B页面中接收A页面传过来的值

④利用url传递

{

    path:'/params/:newsId/:newsTitle',

     component:Params

}  //路由配置 我们需要传递参数是新闻ID（newsId）和新闻标题（newsTitle）.所以我们在路由配置文件里制定了这两个值

在跳转后的页面使用$route.params.newsId 和 $route.params.newsTitle来获取通过url传递过来的值