https://www.cnblogs.com/AlbertP/p/10754880.html
v-show 与 v-if 区别
v-show是css切换，v-if是完整的销毁和重新创建。
使用频繁切换时用v-show，运行时较少改变时用v-if
v-if=‘false’ v-if是条件渲染，当false的时候不会渲染
计算属性和 watch 的区别
计算属性是自动监听依赖值的变化，从而动态返回内容，监听是一个过程，在监听的值变化时，可以触发一个回调，并做一些事情。
所以区别来源于用法，只是需要动态值，那就用计算属性；需要知道值的改变后执行业务逻辑，才用 watch，用反或混用虽然可行，但都是不正确的用法。
说出一下区别会加分
computed 是一个对象时，它有哪些选项？
computed 和 methods 有什么区别？
computed 是否能依赖其它组件的数据？
watch 是一个对象时，它有哪些选项？
有get和set两个选项
methods是一个方法，它可以接受参数，而computed不能，computed是可以缓存的，methods不会。
computed可以依赖其他computed，甚至是其他组件的data
watch 配置
handler
deep 是否深度
immeditate 是否立即执行
总结
当有一些数据需要随着另外一些数据变化时，建议使用computed。
当有一个通用的响应数据变化的时候，要执行一些业务逻辑或异步操作的时候建议使用watcher
事件修饰符
绑定一个原生的click事件， 加native，
其他事件修饰符
stop prevent self
组合键
click.ctrl.exact 只有ctrl被按下的时候才触发
你知道双向绑定和单向数据流吗，vue里面是怎么做的？
- vue是单向数据流，不是双向绑定
- vue的双向绑定不过是语法糖 .sync v-model
- Object.definePropert是用来响应式更新的
vue中不同层级的组件共享数据有哪些方案？
- vuex
- prop/ $emit
-
listener
- provider/ inject
- event bus
懒加载方案？
滚动到当前页面才加载
addEventListener(scroll,handle)
getBoundingClientRect()
new Image()
Throttle or debounce
修饰符.passive
如何检测元素出现在视窗中？
intersectionObserver API
vue中el解析
未命名.png
- 如果存在 render 函数或 template 属性，则挂载元素会被 Vue 生成的 DOM 替换；否则，挂载元素所在的 HTML 会被提取出来用作模版
- el不能挂载到body或者html元素上，因为最后渲染的时候vue会把挂载的元素被template或者render替换掉。W3C规定页面元素一定要包括<html>和<body>标签，如果挂载到这两个元素上，页面没<html>标签或者<body>标签
- el是Vue实例的挂载目标。在实例挂载之后，元素可以用 vm.$el 访问。
示例1： render 函数渲染的 DOM 替换 <div id="ppp"></div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="ppp"></div>
</body>
</html>
new Vue({
el: '#ppp',
router,
store,
render: h => h(App)
})
示例2：字符串模版替换 <div id="ppp"></div>
new Vue({
el: '#ppp',
router,
components: { App },
template: '<App/>'
})
示例3：手动挂载且不存在render函数和template属性
new Vue({
router,
store,
}).$mount('#ppp')
vue生命周期
https://blog.csdn.net/weixin_34301132/article/details/87964549
initLifecycle(vm);
initEvents(vm);
initRender(vm);
callHook(vm, 'beforeCreate');
initInjections(vm); // resolve injections before data/props
initState(vm);
initProvide(vm); // resolve provide after data/props
callHook(vm, 'created');
- beforeCreate
在数据观测和初始化事件还未开始 - created
完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来 - beforeMount
在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。此时还没有挂载html到页面上。
-mounted
在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。
-beforeUpdate
在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。
-updated
在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。
-beforeDestroy
在实例销毁之前调用。实例仍然完全可用。
-destroyed
在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。
网友评论