学习

vm实例挂载到dom节点的方法: 1.

new Vue({ el:#app或者document.getElementById(“app”) template:“

” }) 2.调用mount() const vm=new Vue({ el:#app或者document.getElementById(“app”) template:“<h1></h1>” }) vm.mount(#app或者document.getElementById(“app”)) vue3用createApp()挂载。 vm实例内置api的访问时机 create:$data options watch set delete on emit mounted:$refs el children beforeMounted:$options.template vm实例中，data可以是对象，也可以是函数。 在const vm=new Vue({})中，可以在这里定义vue2的8个生命周期钩子函数:beforeCreated(){在这里不能访问什么} 在vue实例中，访问vm直接用this，例如this.$data 在同一个页面，vue实例外,使用vm.$data

如果不使用key，默认使用index作为key值，可能导致不同的元素使用相同的key值，由于vue的优化机制，会采取就地复用的原则，旧的数据和新数据采用相同的key值，不会触发vue更新新数据，就会导致数据更新了，视图未更新。采用key，可以更精准的判断数据变化的位置，做出精确的改变。 ssr:服务器返回html文件 csr:服务器返回js css文件 服务器返回的js css渲染到页面 加载css生成cssom树，加载js生成dom树，合并成渲染树，根据渲染树进行绘制和布局。 解析html时，遇到js会堵塞html的解析，向服务器请求js文件:通过v8引擎解析，生成抽象语法树，编译成字节码，js可能会修改dom和cssom,可能会引发重排和重绘。 布局，绘制，合成。 html解析时遇到js css文件会请求资源，css会与html解析并行执行，cssom未完成会堵塞渲染，执行进行重排重绘。 js堵塞html的解析，会改变cssom和dom，会触发重排和重绘，会发起网络请求，绑定对应事件。 cssom和dom树结合，生成渲染树。 布局绘制合成 将关键css内联到style标签，非关键css标记为非堵塞资源。 用异步加载，采用async，加载后立即执行。defer，加载后等待html解析后才执行。 在js中减少修改dom和cssom，减少重排重绘。