vue常见面试题

双向数据绑定的原理：

1.vue中双向数据绑定适应于表单元素指令：v-model
2.首先明白mvvm的原理，VM也就是ViewModel负责连接 View（界面） 和 Model（数据）
3.‘监听器’（观察者模式和数据劫持）和‘解析器’

vue父组件向子组件传值（属性绑定）：
传递数据（props）：

1.父组件上面定义的数据：
 data:{
       msg:'父组件content'
      },
2.子组件调用：
  <my-com1 :pmsg="msg"></my-com1>  //组件容器
  Vue.component('my-com1',{
    template:`<div class="my-box">{{pmsg}}</div>`,
    data(){return{ } },
    props:['pmsg']
})

传递方法（this.$emit('pinfo')）：

//info是父组件的方法：
 <my-com1  @pinfo="info"></my-com1>
//子组件定义的方法中的方法接收：
 methods:{
       myinfo(){   console.log('这是子组件自己的方法')  this.$emit('pinfo') } 
         }

vue子组件向父组件传值（事件绑定$emit）：

//子组件方法：
info(){ this.$emit('padd',this.item)  }
//子组件容器元素：
 <my-com @padd="add"></my-com>
// 父组件内部：
add(arg){   console.log(this.flag + arg)   this.str = arg   }

兄弟组件之间的传值：

//发送数据：
 add(){
           bus.$emit('add',this.msg)
           console.log(this.msg)
        } 
//接收数据：
 created(){
        bus.$on('add',(msg) =>{
            console.log(msg)
        })

如何获取dom元素：

ref="domName" 用法：this.$refs.domName

computed和watch的使用场景

//计算属性把两个字符串拼接返回
 computed:{
        root:function(){
            const r = this.name + this.age
            return r
        }
    }

//监测字符长度的变化把他强制转化为一个6位数
 watch:{
        user_name(newVal,oldVal){
            // 当前的长度超过指定长度，强制转化为原有长度
         if(newVal.length > 6) this.user_name = oldVal
        }
    }

v-on可以绑定多个方法

<p @click="one(),two()">点击</p>

Vue.nectTick() $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调

changeStr(){
                this.str = "欢迎关注公众号 张培跃，收看更多精彩内容！";
                this.$nextTick(()=>{
               // "李慷"
               console.log(this.$refs.myP.innerText);
                });
                this.str = "李慷"
}

vue的两个核心点

数据驱动：ViewModel，保证数据和视图的一致性。
组件系统：应用类UI可以看作全部是由组件树构成的。

vue常见的修饰符（.stop .prevent）：

//.stop阻止事件冒泡
<div class="middle" @click.stop="middle"> 
<button @click.stop="inner">点击我(^_^)</button>
</div>
// prevent 阻止默认事件
 <a href="https://www.baidu.com/"  @click.prevent="getinfo">阻止默认事件</a> 
.capture：与事件冒泡的方向相反，事件捕获由外到内；
.self：只会触发自己范围内的事件，不包含子元素；
.once：只会触发一次。

vue组件引入

1.在template中引入组件

2.在script的第一行用import引入路径

3.用component中写上组件名称

delete和vue.delete区别（改变键值和不改变键值）

var a=[1,2,3,4]  
var b=[1,2,3,4]  
delete a[1]
    console.log(a)    
this.$delete(b,1)
    console.log(b)

Vue-router跳转和location.href有什么区别：

location.href='/url'来跳转，简单方便，但是刷新了页面；
router.push()   减少Dom消耗  尤其是在history模式下
//路由的写法
 routes:[
        {path:'/',redirect:'/home'},
        {path:'/home',component:home,children:[
            {path:'/home',redirect:'/home/tab1'},
            {path:'/home/tab1',component:tab1},
            {path:'/home/tab2',component:tab2},
        ]},
        {path:'/move',component:move}
    ],
    linkActiveClass:'active'

vue 插槽slot(比较经典的用法)

image.png

这块在app中不是每个切换都要写一个样式的，而是一个公共的组件通过slot传参

//封装一个公共的组件headerTop.vue
<template>
  <div class="heder-top">
    <slot name="left"></slot>
    <span class="header-title">{{title}}</span>
    <slot name="right"></slot>
  </div>
</template>
<script>
export default {
  props: { title: String },
  data() {return {} },
  methods: {} };
</script>
//页面需要调用的时候：
<script>
//抽离头部引入
import HeaderTop from "../../HeaderTop/HeaderTop";
export default {
  //映射组件
  components: {
    HeaderTop,
  },
</script>
<template>
 <HeaderTop title="陕西省西安市首座...">
      <!-- 作用域插槽传参 left-->
      <span class="header-search" slot="left">
        <i class="iconfont icon-sousuo1" ></i>
      </span>
      <span class="header-search" slot="right" @click="colseuser">
        <span><i class="van-icon van-icon-contact" ></i></span>
      </span>
    </HeaderTop>
</template>
常见的在vue的elementUi组件中表格循环需要自定义元素的：
 <el-table-column
      prop="address"
      label="状态">
      <template slot-scope="scope">
              <el-tag style="background:#67C23A;color: rgb(255, 255, 255);">已发布</el-tag>
      </template>
    </el-table-column>

filter过滤

var arr  = [1,2,3,4,5,6,7,8,9,10]
const arrNew = arr.filter(item =>{
    return item % 2 == 0
})
console.log(arrNew)

vue-loader是什么？使用它的用途有哪些？

解析和转换 .vue 文件，提取出其中的逻辑代码 script、
样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。

vue的params

params一旦设置在路由，params就是路由的一部分，
如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。
<router-link :to="{ name:'router1',params: { id: status}}" >跳转</router-link>