黑马程序员技术交流社区
标题: [南京校区]Vue 问题总结（一） [打印本页]
作者: 大蓝鲸小蟀锅 时间: 2019-10-21 18:33
标题: [南京校区]Vue 问题总结（一）
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传递过来的值
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |