1.v-if和v-show的区别？
v-show通过css中的display控制隐藏和显示，v-if是真的渲染和销毁
如果显示隐藏切换比较频繁，使用v-show，否则使用v-if
2.为什么v-for要使用key？
快速找到节点，减少渲染次数，提高性能
3.描述vue组件的生命周期？
单组件生命周期：
挂载：beforeCreate==》created==》beforeMount==》mounted
更新：beforeUpdate==》updated
销毁：beforeDestory==》destoryed
父子组件生命周期：
挂载：parent beforeCreate==》parent created==》parent beforMount==》child beforeCreate==》child created==》child beforeMount==》child mounted==》parent mounted
更新：parent beforeUpdate==》child beforeUpdate==》child updated==》parent updated
销毁：parent beforeDestory==》child beforeDestory==》child destoryed==》parent destoryed
4.vue组件之间如何进行组件通信的？
（1）父组件--->子组件：使用props
父组件：
<template>
<div>
<Student name= '张三' sex='男' :age='18'></Student>
</div>
</template>
<script>
import Student from './components/Student.vue'
export default {
name: 'app',
components:{Student}
}
</script>
子组件：
<template>
<div>
<h1>{{msg}}</h1>
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<h2>学生年龄：{{myAge+1}}</h2>
<button @click= 'updateAge'>尝试修改收到的年龄</button>
</div>
</template>
<script>
export default {
name: 'Student',
data() {
return {
msg:'我是一个学生',
myAge:this.age
}
},
methods: {
updateAge() {
this.myAge++
}
},
// 简单声明接收
props: ['name', 'age', 'sex']
// 接收的同时对数据类型进行限制
// props: {
// name:String,
// age:Number,
// sex:String
// }
//接收的同时：对数据类型进行限制+默认值的指定+必要值的限定
// props:{
// name: {
// type:String, // name的类型是字符串
// required:true // name是必要的
// },
// age: {
// type:Number,
// default:99 // 默认值
// },
// sex: {
// type:String,
// required:true
// }
// }
}
</script>（2）子组件--->父组件：自定义事件
父组件：
<template>
<div class="app">
<h1>{{msg}}，学生姓名是:{{studentName}}</h1>
<!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据-->
<Student @ligong="getStudentName"/>
</div>
</template>
<script>
import Student from './components/Student'
export default {
name:'App',
components:{Student},
data() {
return {
msg:'你好啊！',
studentName:''
}
},
methods: {
getSchoolName(name){
console.log('App收到了学校名：',name)
this.studentName = name
}
},
}
</script>子组件：
<template>
<div class="school">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<button @click="sendSchoolName">把学校名给App</button>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'小剑',
address:'北京',
}
},
methods: {
sendSchoolName(){
this.$emit('ligong', this.name)
}
},
}
</script>（3）兄弟组件之间通信：使用全局事件总线（$bus）
先安装全局事件总线：
new Vue({
.....
beforeCreate() {
Vue.prototype.$bus = this//安装全局事件总线，$bus就是当前应用的vm
},
....
})示例代码如下：
// 在main.js中安装全局事件总线
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false
//创建vm
new Vue({
el:'#app',
render: h => h(App),
beforeCreate() {
Vue.prototype.$bus = this //安装全局事件总线
},
})
接收数据的组件：
接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身
methods:{
demo(data) {.....}
},
mounted() {
this.$bus.$on('xxx', this.demo)// 或者是写箭头函数的回调
}示例代码如下：
<template>
<div class="school">
<h2>学校名称：{{name}}</h2>
<h2>学校地址：{{address}}</h2>
<h2>收到的学生的名字是：{{studentName}}</h2>
</div>
</template>
<script>
export default {
name:'School',
data() {
return {
name:'小剑',
address:'北京',
studentName:''
}
},
methods:{
// getName(name) {
// this.studentName = name
// },
},
mounted() {
// 写法一，把回调函数写在methods函数当中
// this.$bus.$on('hello', this,getName)
// 写法二，直接写回调函数
this.$bus.$on('hello', (name)=> {
this.studentName = name
})
},
beforeDestroy() {
this.$bus.$off('hello')
},
}
</script>提供数据 ：this.$bus.$emit('xxx', 数据)
示例代码如下：
<template>
<div class="student">
<h2>学生姓名：{{name}}</h2>
<h2>学生性别：{{sex}}</h2>
<button @click="sendStudentName">把学生名给School组件</button>
</div>
</template>
<script>
export default {
name:'Student',
data() {
return {
name:'张三',
sex:'男',
}
},
methods: {
sendStudentName(){
this.$bus.$emit('hello',this.name)
}
},
}
</script>5.双向绑定v-model的实现原理？
首先是从data里面的数据通过绑定到input控件和p标签上，然后在input上通过input监听控件，触发
change事件，调用方法都可以默认获取e事件，e.target.value是获取调用该方法的dom对象上的
value值，把value值赋给data里面的初始数据，从而实现双向数据绑定的原理
6.对MVVM的理解？
M==>Model(数据模型)，V==>View(代表UI组件，负责将数据转换为UI展现出来)，
VM==>ViewModel，在MVVM架构下，View和Model没有直接的关系，而是通过ViewModel进行交
互的，Model和ViewModel之间的交互是相互，View数据的变化会同步到Model上，而Model
的变化也会同步到View上
7.data为什么是一个函数？
将data定义为一个函数，在该函数体内部返回一个函数，这样，在创建组件实例时，会调用data()方法，获取返回的新的数据对象，则各个组件实例就会有自己独立的数据对象，组件间互不影响
8.vue指令有哪些？
v-html // html
v-text // 元素里要显示的内容
v-bind：data // 绑定动态数据 ：data
v-on：click // 绑定事件 @click
.stop 阻止事件继续传播
.prevent 阻止默认时间
.capture 使用事件捕获模式,即元素自身触发的事件先在此处处理，然后才交由内部元素进行
处理
.self 只当在 event.target 是当前元素自身时触发处理函数
.once 事件将只会触发一次
.passive 告诉浏览器你不想阻止事件的默认行为
v-for // 循环，vue2中v-for的优先级高于v-if，不推荐一起使用
v-if // 条件渲染指令 如果是真则渲染节点，否则不渲染节点
v-if、v-else 和 v-else-if ：类似js的if...else判断语句
v-show：通过display:none;控制元素显示隐藏
v-model // 双向绑定，用于表单
.lazy 默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change
事件再同步。
.number 自动将用户的输入值转化为数值类型
.trim 自动过滤用户输入的首尾空格
v-pre ：主要用来跳过这个元素和它的子元素编译过程。
v-cloak ：保持在元素上直到关联实例结束时进行编译。
v-once ：关联的实例，只会渲染一次。之后的重新渲染，实例极其所有的子节点将被视为静态内
容跳过，这可以用于优化更新性能
9.vue.js的两个核心是什么？
数据驱动和组件化
10.vue动态组件？
多个组件通过同一个挂载点进行组件的切换，is的值是哪个组件的名称，那么页面就会显示哪个组
件。
11.路由传参的方式？
query传参和params传参
（1）声明式导航
不带参跳转 对应的地址为/foo
url字符串拼接传参 对应的地址为/foo?id=123
query方式对象形式传参 对应的地址为/foo?id=123
params方式对象形式传参 对应地址为 /path/123 , 注意params和query一起使用params会失效，
params与name一起使用
（2）编程式导航
(路由实例对象router=new VueRouter())
字符串router.push('home')
对象router.push({ path: 'home' })
命名的路由 对应路径为/path/123
router.push({ name: 'user', params: { userId: '123' }})
带查询参数，变成 /register?plan=123
router.push({ path: 'register', query: { plan: '123' }})
接收参数
this.$route.params.id
this.$route.query.xxx
12.vue生命周期的使用场景？
beforeCreate：创建前，访问不到data当中的属性以及methods当中的属性和方法，可以在当前生命周期创建一个loading，在页面加载完成之后将loading移除
created：创建后，当前生命周期执行的时候会遍历data中所有的属性，给每一个属性都添加一个getter、setter方法,将data中的属性变成一个响应式属性
beforeMount：模板与数据进行结合，但是还没有挂载到页面上。因此我们可以在当前生命周期中进行数据最后的修改
mounted：当前生命周期数据和模板进行相结合，并且已经挂载到页面上了，因此我们可以在当前生命周期中获取到真实的DOM元素，在这发起后端请求，拿回数据，配合路由钩子做一些事情
beforeUpdate：当数据发生改变的时候当前生命周期就会执行，因此我们可以通过当前生命周期来检测数据的变化，当前生命周期执行的时候会将更新的数据与模板进行相结合，但是并没有挂载到页面上，因此我们可以在当前生命周期中做更新数据的最后修改
updated：数据与模板进行相结合，并且将更新后的数据挂载到了页面上。因此我们可以在当前生命周期中获取到最新的DOM结构
beforeDestory：当前生命周期中我们需要做事件的解绑、监听的移除、定时器的清除等操作
destoryed：当前生命周期执行完毕后会将vue与页面之间的关联进行断开，当<keep-alive>包裹动态组件的时候会触发两个新的生命周期
activated：当组件为活跃状态的时候触发(活跃状态：进入页面的时候)
deactivated：缓存状态的时候触发
13.第一次页面加载会触发哪几个钩子？
会触发 beforeCreate, created, beforeMount, mounted 这几个钩子
14.为什么使用vue？
优点：轻量级的框架，双向数据绑定，组件化开发，单页面路由，学习成本低，虚拟DOM，渐进式框架，数据和结构分离，运行速度快，插件化
缺点：不支持IE8以下版本，社区不丰富，缺乏高级教程和文档，单页面应用不利于优化，首次加载耗时较久
扫一扫
305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
