VUE04

1.Vue渲染模板怎么保留模板中html的注释？

在组件中将comments选项设置为true

<template comments>
  ...
</template>

comments
类型：boolean

默认值：false

限制：这个选项只在完整构建版本中的浏览器内编译时可用。

详细：

当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。

类型：boolean

默认值：false

限制：这个选项只在完整构建版本中的浏览器内编译时可用。

详细：

当设为 true 时，将会保留且渲染模板中的 HTML 注释。默认行为是舍弃它们。

2.说说看Vue.observable.

Observable 翻译过来我们可以理解成可观察的

我们先来看一下其在Vue中的定义：

Vue.observable，让一个对象变成响应式数据。Vue 内部会用它来处理 data 函数返回的对象.
返回的对象可以直接用于渲染函数和计算属性内，并且会在发生变更时触发相应的更新。也可以作为最小化的跨组件状态存储器。

Vue.observable({ count : 1})

其作用等同于

new vue({ count : 1})

在 Vue 2.x 中，被传入的对象会直接被 Vue.observable 变更，它和被返回的对象是同一个对象

在 Vue 3.x 中，则会返回一个可响应的代理，而对源对象直接进行变更仍然是不可响应的。

在非父子组件通信时，可以使用通常的bus或者使用vuex，但是实现的功能不是太复杂，而使用上面两个又有点繁琐。这时，observable就是一个很好的选择。
js:

// 引入vue
import Vue from 'vue
// 创建state对象，使用observable让state对象可响应
export let state = Vue.observable({
  name: '张三',
  'age': 38
})
// 创建对应的方法
export let mutations = {
  changeName(name) {
    state.name = name
  },
  setAge(age) {
    state.age = age
  }
}

xxx.vue:

<template>
  <div>
    姓名：{{ name }}
    年龄：{{ age }}
    <button @click="changeName('李四')">改变姓名</button>
    <button @click="setAge(18)">改变年龄</button>
  </div>
</template>
import { state, mutations } from '@/store
export default {
  // 在计算属性中拿到值
  computed: {
    name() {
      return state.name
    },
    age() {
      return state.age
    }
  },
  // 调用mutations里面的方法，更新数据
  methods: {
    changeName: mutations.changeName,
    setAge: mutations.setAge
  }
}

3.style加上scoped属性的用途和原理。

在标签上绑定了自定义属性，防止css全局污染
但是很多时候使用ui框架如果加scope就不能覆盖，这个时候一般写sass 会在最外层包裹该组件名的id 就可以不使用scoped 了。
是的，不过用/deep/也可以对组件内的样式进行覆盖

用途：防止全局同名CSS污染

原理：在标签加上v-data-something属性，再在选择器时加上对应[v-data-something]，即CSS带属性选择器，以此完成类似作用域的选择方式。

scoped会在元素上添加唯一的属性（data-v-x形式），css编译后也会加上属性选择器，从而达到限制作用域的目的。

缺点：

（1）由于只是通过属性限制，类还是原来的类，所以在其他地方对类设置样式还是可以造成污染。

（2）添加了属性选择器，对于CSS选择器的权重加重了。

（3）外层组件包裹子组件，会给子组件的根节点添加data属性。在外层组件中无法修改子组件中除了根节点以外的节点的样式。比如子组件中有box类，在父节点中设置样式，会被编译为

.box[data-v-x]的形式，但是box类所在的节点上没有添加data属性，因此无法修改样式。

可以使用/deep/或者>>>穿透CSS，这样外层组件设置的box类编译后的就为[data-v-x] .box了，就可以进行修改。

二、可以使用CSS Module

CSS Module没有添加唯一属性，而是通过修改类名限制作用域。这样类发生了变化，在其他地方设置样式无法造成污染，也没有使CSS选择器的权重增加。

这里给大家排个坑，这里虽然设置了scoped 如果我们使用bootstrap的话，因为bootstrap是设置的全局属性，可能会有冲突。

4.Vue边界情况有哪些？

访问根实例
1 .this.$root
2 .所有的子组件都可以将这个实例作为一个全局的store来访问或者使用
3 .小型的小项目其实可以直接这样共享数据，大型的项目还是要使用Vuex来管理状态

访问父组件实例
1 .$parent 可以用来从一个子组件访问父组件的实例
2 .只要明确父子关系其实可以随便用的吧，如果父子变成孙子结构那就不行了。所以还需要加一个hack

访问子组件实例或子元素
1 .refs
2 .refs只会在组件渲染之后生效，避免在模板或者计算属性里面访问refs

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

程序化的事件侦听器
1 .正常使用一个组件的时候

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

2 .问题

1 .建立的代码独立于我们的清理代码，比较难的程序化的清理我们建立的所有东西
2 .需要在组件实例中保存这个picker，但是可以的话最好只有在生命周期钩子里面可以访问到他。这个好像还是有点需要，因为我需要他暴露出来的一些接口，然后在里面操作的
3 .解决方法

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

  this.$once('hook:beforeDestroy', function () {
    picker.destroy()
  })
}

循环引用
递归组件
1 .组件是可以在自己的模板中调用自身的。只需要给组件加一个name属性
2 .一定要确保判断是否递归的组件的那个值最后是false,不然就会无限递归

 <ul v-if="isFolder" v-show="open">
//这个判断一定要最后是fasle
                   <nav-list 
                            v-for="(cell,index) in ullist.children"
                            :ullist="cell"
                            :depth="depth+1"
                            :key="index">
                    </nav-list>
 </ul>

组件之间的循环引用
1 .两个组件在渲染时互为对方的后代和祖先组件，是一个悖论。
2 .使用Vue.component全局注册组件的时候时没有问题的。

控制更新
1 .this.$forceUpdate()
2 .如果你需要在Vue中做一次强制更新，99%的情况就是你在某个地方做错了事
3 .数组和对象的使用方法不对或者事依赖了一个没有被响应系统追踪的状态。

5.如何在子组件里访问父组件的实例?

vue中如果父组件想调用子组件的方法，可以在子组件中加上ref，然后通过this.$refs.ref.method调用…

Vue中子组件调用父组件的方法，这里有三种方法提供参考：

1：直接在子组件中通过this.$parent.event来调用父组件的方法

2：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件

3：父组件把方法传入子组件中，在子组件里直接调用这个方法.