vue-1

1.vue渲染模板时,怎么保留模板中的HTML注释呢?

<template comments>
    ...
</template>

选项 : comments
默认值 : false
详细:当设置为true时,将会保留并渲染模板中的HTML，默认行为是舍弃他们。
限制: 这个选项(comments)只在完整构建版本中的浏览器内编译时可用,

2.Vue.observable你有了解过吗？说说看。

随着组件的细化,就会遇到多组件状态共享的想情况，Vuex当然可以解决这类问题不过就像Vuex官方文档所说,如果应用不够大,为了避免代码繁琐冗余,最好不要使用它。vue.js 2.6 新增 Observable API,通过使用这个APi 我们可以解决一些简单的跨组件数据状态共享的情况。

api ： Vue.observable(object)
参数 ： {Object} object
用法 ： 让一个对象可响应。Vue内部会使用它来处理data函数返回的的对象。返回的对象可以直接用于渲染函数和计算属性内，并且会在发生改变时触发相应的更新。也可以作为最小化的跨组件状态处理器。

const state = Vue.observable({ count: 0 })
const Demo = {
  render(h) {
    return h('button', {
      on: { click: () => { state.count++ }}
    }, `count is: ${state.count}`)
  }
}

3.你知道style加scoped属性的用途和原理吗?

作用:实现组件的私有化，不对全局造成样式污染，表示当前style属性只属于当前模块。
原理 ：

<Button data-v-469af010 name="button">添加</Button>

button[data-v-469af010]{
    color:red;
}

通过观察DOM结构发现: vue通过在DOM结构以及css样式上加上唯一的标识，保证唯一，达到样式私有化，不污染全局的作用。如上代码，样式属性也会多一个该字符，以保证唯一。由此可知加了scoped属性的组件，为了达到不污染全局，做了如下处理：

1. 给HTML的DOM节点加一个不重复属性 data-v-469af010 标志唯一性
2. 给添加scoped属性组件的每个样式选择器后添加一个等同于“不重复属性”相同的字段，实现类似于作用域的作用，不影响全局
3. 如果组件内部还有组件，会给外层和内层组件都添加唯一性字段，内外层组件相互不影响

4.你希望vue3.0有什么功能或者改进的地方

更小巧，更快速；支持摇树优化；支持 Fragments 和跨组件渲染；支持自定义渲染器。

5.Vue边界情况有哪些

1. 访问元素 & 组件 (在绝大多数情况下,我们最好不要触达另一个组件实例内部或手动操作DOM元素，不过也确实在一些情况下这这些事合适的)

**1.1：访问跟实例 $root**
在每个 new Vue 实例的子组件中，其跟实例可以通过 $root属性访问。例如在这个跟实例中:

// vue根实例
new Vue({
    data:{
        foo:1
    },
    computed:{
        bar:function(){/****/}
    },
    methods:{
        baz:function(){/****/}
    }
})

所有的子组件都可以将这个实例作为一个全局store来访问和使用

// 获取根组件的数据
this.$root.foo
//修改根组件的数据
this.$root.foo = 2
//访问根组件的计算属性
this.$root.bar 
// 访问根组件的方法
this.$root.baz()

对于demo，或者组件很少的小型应用来说很方便，不过中大型项目就不行了，因此绝大数情况下我们推荐使用Vuex来进行状态管理

1.2. 访问父级组件实例 $parent
$parent属性可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以prop的方式传入子组件的方式。

1.3 访问子组件实例或子元素 $refs

尽管存在prop和事件，有的时候你任可能需要在Javascript里直接访问一个子组件。为了达到这个目的，你可以通过ref特性为这个组件赋予一个ID引用，例如:

<base-input ref="userNameInput"></base-input>

// 在已经定义这个ref的组件里，访问<base-input>组件实例

this.$refs.userNameInput   

2.依赖注入(provide/inject)
解决组件之间通信的利器，不受组件层级结构的限制

provide：Object | () => Object
inject：Array<string> | { [key: string]: string | Symbol | Object }

1. provide允许我们指定我们想要提供给后代的数据和方法
2. inject在任何后代组件里,我们都可以使用inject项来接收我们想要添加在这个实例上的属性
3. 是一个更大范围的有效的prop
4. 祖先组件不需要知道那些后代组件会使用它提供的属性
5. 后代组件不需要知道被注入的属性来自哪里

3.程序化的事件侦听器
定义 ： 创建实例和销毁实例的代码放在一起(如:同一个生命周期钩子)
原因 ： 某些第三方插件必须在当前组件卸载后清除该实例。比如百度的的富文本框UEditor,如果不清除再次在下个组件使用时会有bug，类似于小程序的语音实例，必须在离开当前页面的时候销毁当前的语音实例，不然语音会一直播放。

方案一

mounted:function(){
    // pikaday 是一个第三方日期库
    this.picker = new Pikaday({
        field: this.refs.input,
        format:'YYYY-MM-DD'
    })
},
// 在组件被销毁之前，也销毁这个日期选择器
beforeDestroy:function(){
    this.picker.destroy();
}

方案二: 通过$once这个事件侦听器，在定义日期选择器后的位置来清除日期选择器
mounted:function(){

var picker = new Pikaday({
    field:this.refs.input,
    format:'YYYY-MM-DD'
});
this.$once('hook:beforeDestroy',function(){
    picker.destroy();
})

}
通过代码对比我们可以看出方案一的缺点:

1. 它需要在这个组件里保存这个数据 picker,这是多余的
2. 我们建立日期选择器的代码独立于我们清除日期选择器的代码，使得我们比较难程序化的清理我们所创建的东西

方案二刚好解决了方案一的问题，所以更好的方式是方案二。
我们甚至可以在一个页面，开启多个这种创建实例和销毁实例:

mounted:function(){
    this.attachDatePicker('startTime');
    this.attachDatePicker('endTime');
},
methods:{
    attachDatePicker(refName){
        var picker = new Pikaday({
            field:this.refs[refName],
            format:'YYYY-MM-DD'
        });
        this.$once('hook:beforeDestroy',function(){
            picker.destroy()
        })
    }
}