持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第10天，点击查看活动详情juejin.cn/post/714765…
组件边界
1、解析DOM模板时的注意事项
Vue模板嵌套时要注意（<ul>,<ol>,<table>,<select>）：使用这四个标记时注意，里面的标记都是固定的，如果他们四个里面出现别的标记，可能会出现报错或警告。必须用<li>、<tr>、<option>等包裹。
实在想加自定义组件，给<tr>加is属性，值就是要渲染的组件，这个组件就会把<tr>替换掉。
面试题：
如果给table里加一个自定义组件，该如何实现？或者我给table加了自定义组件，报错了，怎么办？
解答：给table正常添加tr元素，然后给tr添加is属性，值等于要渲染的组件，渲染对应的组件。
访问元素&组件
- 在大多数情况下，我们不去操作真实DOM。
- 访问根实例；根实例就是通过
new Vuenew出来的组件，对于我们的项目来说，就是最外层的组件，main.js里的new Vue创建出来的组件，只是我们没写什么东西，如果在这里面写数据，它的后代组件都可以进行访问。
1、$root直接访问根实例
- 通过的是
$root属性，就可以直接访问到通过new Vue创建出来的对象，在方法里我们通过this.$root进行访问，后面紧跟数据名。 - 在vue模板中直接使用
$root访问根实例的数据. - 可以直接对根实例中的数据进行修改。
这张图片是通过点击事件获取main.js里的publice数据，以及直接在vue模板里进行使用。
上面这张图是点击事件
第三张图是main.js里创建的new Vue对象里的数据
2、$parent获取父组件
用法：与$root一样
3、$refs访问子组件和元素
用法：1、给子组件绑定ref属性，<ChildCom ref="child"></ChildCom>
在父组件里通过this.$refs或模板里用$ref.子组件的ref名就可以访问到子组件.
$refs只会在租价渲染完成之后生效。例如子组件的数据改变了，父组件不会更改，需要重新获取一下子组件数据才能获得新数据
又是$refs第一次渲染时不一定就能加载出来，所以要用到连运算符
$forceUpdate强制更新
- 作用：强制更新
- 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
v-once指令
- 作用：会把静态组件进行缓存
- 使用方法：把
v-once加在最外层的div标记身上。 - 尽可能用在只有静态元素的组件身上，就是该组件只有纯静态html标记，这样的话会把组件缓存下来，没有处理数据。读取的时候，就会读取缓存。
- 注意：不要过度使用它，因为如果另外一个人使用该组件，并加了data数据进行处理，组件并不会更新，这样会找不到为什么组件不更新的原因，因为每次组件渲染都在读取第一次的缓存。
