浏览器反馈:
所以 如果指定了el,且没有template,那么el中的outerHTML将作为template
如果有template的话,优先选择template中的内容
VUE渲染思路
template => VDOM(虚拟dom) => html
它会先把数据加载到VDOM中,不影响html,然后VDOM处理后把结果返还给html中,减轻html负担
render
render是什么
字符串模板的代替方案,允许你发挥JavaScript最大的编程能力。该渲染函数接收到一个 createElement 方法 作为第一个参数用来创建 VNode
具体使用我们可以参考下方代码
四月中旬
浏览器反馈
我们可以看到内容为1906的h1标签替换了我们id为app的div
所以render方法与我们上边说的模板方法是一样的
render写起来要比模板方法渲染的时候更灵活一些,但是 它的写法相对复杂一些
他所有的功能都是依照这createElement这个参数来的,有点像event事件对象,事件一触发就会给我们传递一个事件对象来,这里也是,事件一触发,就会给我们传递过来一个createElement
而这个createElement就是我们刚才提到的一个虚拟dom
如果说他麻烦的话,我们不放处理一下挂载点被替换这个事情,然后对比一下
我们看一下代码
new Vue({
el:“#app”,
render(createElement){
return createElement(“div”,{attrs:{id:‘#app’}},[
createElement(“h1”,{attrs:{id:“h”}},“1906”)
]);
}
});
浏览器反馈
看一看到,功能是实现了,但是和模板方法比起来,代码比较麻烦,比较生涩。
延迟挂载
用模板方法的时候,不写挂载点就像封装了函数但是不调用一样,是不会执行的,但是挂载的时间是可以变得,我们从下方代码看一下。
浏览器反馈
可以看到浏览器上边是什么也没有的
延迟加载也比较简单,只需要后续给他制定一下挂载点就可以了
app.$mount(“#app”);
这是我们再看一下浏览器反馈
注意点:
- el挂载点 不能是body和 html,不然会报错
-
当实例被挂载后,实例对象山过就会有一个$el 的属性 这个属性中存的内容就是挂载的元素
-
vue实例上的内置属性都是以 $ 或者 _ 开头的 ,所以data中的数据命名不要使用 $ 或者 _ 来开头
因为 Vue 解析 data 以后 会把当前data中的数据记载到 实例对象中
视图更新
相应数据的变化(数据来驱动视图)
数据的变化会自动更新视图(自动更新渲染模板)
准备一下代码
{{name}}
注意点:
这里没有写template但是在页面元素中用双花括号也可以!
浏览器反馈
然后我们在控制台调整一下数据后浏览器的反馈
上图我们是通过app.name去修改的,实际上$data里边也有一个name,所以通过app.$data.name也可以去修改,不过没有app.name方便,所以就不掩饰了
数据劫持
数据劫持,其实就是变相的数据监听
我们现在通过代码来看一下
{{name}}
浏览器反馈
然后我们继续去控制台修改数据
注意 只修改数据是不会渲染到页面的,我们需要在调用一下render函数
手动更新数据,然后手动去渲染,但是借用vue的话vue会帮我们自动化完成,vue在里边添加了监听的功能,监听数据每次发生改变就去调用一下渲染的方法
监听是怎么来的
有一个方法
Object.defineProperty();
这个方法就是帮我们监听某个对象中的某个属性(只能是单一的属性)
当这个属性发生改变时,我们去调用一些方法,这些方法以对象的方式传给我
代码示例
let $data = {x:1};
Object.defineProperty(obj,‘x’,{
set(newVale){
$data.x = newVale;
render();
},
get(){
return $data.x;
}
});
现在去控制台直接修改数据就可以渲染页面
问题: 无法对新增的属性进行监听(只能监听一个)
我们想处理他的话,只能在写一个监听
我们从新整理一下代码
{{name}}
浏览器反馈
视图更新的问题
刚才我们说了,事件监听只能监听某个对象里的某一个属性,并不能监听多个属性
然后我们现在看一种情况
x:{{obj.x}}
y:{{obj.y}}
浏览器反馈
直接修改x值在修改y值是不会渲染页面的
但是先修改y的值,在修改x的值,就会触发监听并渲染页面
但我们通过一个方法就可以了
app.$set(app.obj,“y”,2)
浏览器反馈
并且可以直接修改y的值
现在他们之间的监听就是各自修改各自的值
这个方式就相当于把Object.defineProperty()再写一遍
但是方便很多
扩展
通过Object.defineProperty()监听拦截会存在一些问题
-
属性新增属性
-
数组的方法:push / pop / shift / unshift / splice / sort reverse
-
数组新增值:[]
-
数组length属性
以上的操作中并不会触发监听拦截
但是vue对数组中的push / pop 等方法进行重新包装,所以在vue中调用这些方法,可以对数组的修改进行监听拦截
我们通过代码来看
自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。
深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!**
因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。
[外链图片转存中…(img-3HfJQMSh-1712374205040)]
[外链图片转存中…(img-3npVkhM6-1712374205041)]
既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!
[外链图片转存中…(img-5j1hXCmC-1712374205041)]
由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!
如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)
最后
技术是没有终点的,也是学不完的,最重要的是活着、不秃。零基础入门的时候看书还是看视频,我觉得成年人,何必做选择题呢,两个都要。喜欢看书就看书,喜欢看视频就看视频。最重要的是在自学的过程中,一定不要眼高手低,要实战,把学到的技术投入到项目当中,解决问题,之后进一步锤炼自己的技术。
技术学到手后,就要开始准备面试了,找工作的时候一定要好好准备简历,毕竟简历是找工作的敲门砖,还有就是要多做面试题,复习巩固。有需要面试题资料的朋友点击这里可以免费领取。
[外链图片转存中…(img-bRyRRgzo-1712374205041)]