撩课-Web大前端每天5道面试题-Day20
1.vue生命周期的作用是什么？
它的生命周期中有多个事件钩子，让我们在控制整个Vue实例的过程时更容易形成好的逻辑。
2. Vue实现数据双向绑定的原理：Object.defineProperty（）?
vue实现数据双向绑定主要是：
采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）
来劫持各个属性的setter，getter，
在数据变动时发布消息给订阅者，触发相应监听回调。
当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，
Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。
用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，
在属性被访问和修改时通知变化。 vue的数据双向绑定 将MVVM作为数据绑定的入口，
整合Observer，Compile和Watcher三者，
通过Observer来监听自己的model的数据变化，
通过Compile来解析编译模板指令（vue中是用来解析 {{}}），
最终利用watcher搭起observer和Compile之间的通信桥梁，
达到数据变化 —>视图更新；
视图交互变化（input）—>数据model变更双向绑定效果。 js实现简单的双向绑定: <body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
3.vue-cli如何新增自定义指令？
.创建局部指令
var app = new Vue({
el: '#app',
data: {
},
// 创建指令(可以多个)
directives: {
// 指令名称
dir1: {
inserted(el) {
// 指令中第一个参数是当前使用指令的DOM
console.log(el);
console.log(arguments);
// 对DOM进行操作
el.style.width = '200px';
el.style.height = '200px';
el.style.background = '#000';
}
}
}
})
.全局指令
Vue.directive('dir2', {
inserted(el) {
console.log(el);
}
})
.指令的使用
<div id="app">
<div v-dir1></div>
<div v-dir2></div>
</div>
4.v-if 和 v-show 区别?
v-if按照条件是否渲染，v-show是display的block或none；
5.mvvm和mvc区别？
mvc和mvvm其实区别并不大。
都是一种设计思想。
主要就是mvc中Controller演变成mvvm中的viewModel。
mvvm主要解决了mvc中大量的DOM 操作使页面渲染性能降低，
加载速度变慢，影响用户体验。
和当 Model 频繁发生变化，开发者需要主动更新到View 。
撩课-Web大前端每天5道面试题-Day20的更多相关文章
- 撩课-Web大前端每天5道面试题-Day10
1. px和em的区别? px和em都是长度单位; 区别是: px的值是固定的,指定是多少就是多少, 计算比较容易. em得值不是固定的,并且em会继承父级元素的字体大小. 浏览器的默认字体高都是16 ...
- 撩课-Web大前端每天5道面试题-Day4
1. 如何实现瀑布流? 瀑布流布局的原理: ) 瀑布流布局要求要进行布置的元素等宽, 然后计算元素的宽度, 与浏览器宽度之比,得到需要布置的列数; ) 创建一个数组,长度为列数, 里面的值为已布置元素 ...
- 撩课-Web大前端每天5道面试题-Day1
1. var的变量提升的底层原理是什么? JS引擎的工作方式是: 1) 先解析代码,获取所有被声明的变量: 2)然后在运行.也就是说分为预处理和执行两个阶段. 变量提升:所有变量的声明语句都会被提升到 ...
- 撩课-Web大前端每天5道面试题-Day11
1. 如何手写一个JQ插件? 方式一: $.extend(src) 该方法就是将src合并到JQ的全局对象中去: $.extend({ log: ()=>{alert('撩课itLike');} ...
- 撩课-Web大前端每天5道面试题-Day31
1.web storage和cookie的区别? Web Storage的概念和cookie相似, 区别是它是为了更大容量存储设计的. Cookie的大小是受限的, 并且每次你请求一个新的页面的时候C ...
- 撩课-Web大前端每天5道面试题-Day25
1.web前端开发,如何提高页面性能优化? 内容方面: .减少 HTTP 请求 (Make Fewer HTTP Requests) .减少 DOM 元素数量 (Reduce the Number o ...
- 撩课-Web大前端每天5道面试题-Day7
1. 你能描述一下渐进增强和优雅降级之间的不同吗? 定义: 优雅降级(graceful degradation): 一开始就构建站点的完整功能, 然后针对浏览器测试和修复 渐进增强(progressi ...
- 撩课-Web大前端每天5道面试题-Day30
1.什么叫优雅降级和渐进增强? 优雅降级: Web站点在所有新式浏览器中都能正常工作, 如果用户使用的是老式浏览器, 则代码会针对旧版本的IE进行降级处理了, 使之在旧式浏览器上以某种形式降级体验却不 ...
- 撩课-Web大前端每天5道面试题-Day23
1.为什么用Nodejs,它有哪些优缺点? 优点: 事件驱动,通过闭包很容易实现客户端的生命活期. 不用担心多线程,锁,并行计算的问题 V8引擎速度非常快 对于游戏来说,写一遍游戏逻辑代码,前端后端通 ...
随机推荐
- Word发表blog格式模板
一级标题(黑体,二号,加粗) 二级标题(黑体,三号,加粗) 正文(宋体+Times New Roman,小四) 注意事项: 序号列表"不连续"时,不得使用自动序号 连续(word连 ...
- day 112天，爬虫(拉钩网,斗音，GitHub)第二天
提前准备工作.安装准备工作(day3用) 1. 安装scrapy https://www.cnblogs.com/wupeiqi/articles/6229292.html a. 下载twiste ...
- bzoj2095: [Poi2010]Bridges（二分+混合图求欧拉回路）
传送门 这篇题解讲的真吼->这里 首先我们可以二分一个答案,然后把所有权值小于这个答案的都加入图中 那么问题就转化为一张混合图(既有有向边又有无向边)中是否存在欧拉回路 首先 无向图存在欧拉回路 ...
- [JavaScript] 获取数组中相同元素的个数
/** * 获取数组中相同元素的个数 * @param val 相同的元素 * @param arr 传入数组 */ function getSameNum(val,arr){ processArr ...
- 扩展中国剩余定理（扩展CRT）详解
今天在$xsy$上翻题翻到了一道扩展CRT的题,就顺便重温了下(扩展CRT模板也在里面) 中国剩余定理是用于求一个最小的$x$,满足$x\equiv c_i \pmod{m_i}$. 正常的$CRT$ ...
- 【NOIP2013】转圈游戏 快速幂
题目大意:给你四个整数$n,m,k,x$,求$(x+m\times 10^k)%n$. 直接一个快速幂就好了,注意开$long\ long$. #include<bits/stdc++.h> ...
- Linux CentOS7系统中php安装配置
本篇讲解如何配置php开发环境,让你的php代码可以正常的在网页中运行. 准备工作 linux centos7操作系统 ssh软件 nginx php资源 想要了解更多关于php的内容,请访问: ph ...
- Hive执行过程
http://blog.csdn.net/wf1982/article/details/9122543
- Picasso处理同一url，但资源变了的情况
问题:上传头像成功后,头像的url没变,加载头像时还是从缓存中根据url加载以前的图片. 这个问题,很多人遇到过.也受到很多同行的启发. 图片url不变,感觉不是很合理,这样会把缓存搞乱. 但是,作为 ...
- Camtasia Studio的下载
不多说,直接上干货! 具体还没写 https://www.techsmith.com/video-editor.html 欢迎大家,加入我的微信公众号:大数据躺过的坑 人工智能躺过的坑 ...