Vue基础

a、vue内置指令v-show与v-if的区别

v-show 是一个样式的切换，在页面渲染时已经加载；v-if是每次切换都是重新加载和销毁

b、vue动态绑定class

:class="{'isRed': isRed, 'isGreen': isGreen}"

:style="{color: color, fontSize: fontSize + 'px' }"

data() {

  return {

    isRed: true,

    isGreen: false,

    color:  '#e4e4e4',

    fontSize: 20,

}

}

 

c、自定义组件中的data为什么是函数呢？为什么new Vue的实例里data可以是一个对象呢？

  组件是用来复用的，js里对象是引用关系，如果作用域没有被隔离，就会出现冲突，所以组件的data是一个函数，状态用return返回；new Vue的实例是不会被复用的，不存才引用对象问题，所以data可以是对象。

d、vue计算属性（computed）和watch的区别？

computed是自动监听依赖值的变化，动态返回内容；watch是一个监听过程，在监听到值变化时可以处理一些逻辑；重要区别就在于你要怎么用，一般有两种情况：

1、如果你只需要动态值，比如对值做个换算什么的，就用computed

2、如果你想在知道值变化时要处理一些业务，比如重新渲染数据，那么就用watch

watch里面有配置项

data() {

  return {

    type: 'haight',

    sum：100，

}

}，

computed: {

   count() {

       return sum + 'm'

   }

},

watch：{

    type: {

        handler(newVal, oldVal) {

      },

      deep: true,  // 是否深度监听

       immeditate: true, // 是否立即执行

    }

}

 

e、vue的单向数据流

单向数据主要出现在组件通信当中，父组件通过prop把数据传给子组件，但是这个prop只能是父组件设置，子组件不能，而且子组件还不能修改父组件prop过来的值。子组件想要修改父组件prop过来的值怎么办呢？

1、可以在自己组建中拷贝一个这个值在data中，data里面的值是可以修改的；

export default{

props: {

   parentVal: {

     type: String,

     default: ''

   }

},

data() {

  return {

    childrenVue: this.parentVal,

   }

}

 

2、用this.$emit()派发一个自定义事件给父组件修改，来达到修改值的效果

f、vue生命周期（常见的8个）

1、创建前后beforeCreate/creater

     在beforeCreate阶段，vue实例的挂载元素el和数据data都还是undefined，还没有初始化

    在created阶段$el还没有，$data有了

2、挂载前后beforeMount/mounded

    在beforeMount阶段，vue实例的$el和$data都初始化了，但还是挂载在之前未虚拟的dom节点，data还没有替换

    在mounded阶段，vue实例渲染挂载完成，data成功渲染

3、更新前后beforeUpdate/updated

    当vue实例的data变化时会触发beforeUpdate/updated这两个方法，但在项目中不常用这两个方法

4、销毁前后beforeDestory/destoryed

     beforeDestory阶段。出现在vue实例销毁前，一般在这里通过removeEventListener接触手动绑定事件，或者一些自定义的内存；

    destoryed在vue实例销毁之后触发