撩课-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引擎速度非常快 对于游戏来说,写一遍游戏逻辑代码,前端后端通 ...
随机推荐
- Android Studio - No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android
错误提示: No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el-linux-android 错 ...
- 队列（循环队列）----C语言
线性结构:有且只有一个根节点,且每个节点最多有一个直接前驱和一个直接后继的非空数据结构 非线性结构:不满足线性结构的数据结构 队列 队列一般分为两类:链式队列和顺序队列 链式队列---链式队列即用链表 ...
- [Angular 6] 初学angular，环境全部最新，[ ng serve ] 不能启动，卡在 95% 不动 => 解决方案
2018.9.7 问题描述: 通过ng serve命令启动angular应用时,卡在95%, ctrl+c 停掉后看到错误内容为找不到ng_modules下的angular模块下的package.js ...
- C#使用 RNGCryptoServiceProvider 生成强随机字符串
为了生成更加可靠的随机数,微软在System.Security.Cryptography命名空间下提供一个名为system.Security.Cryptography.RNGCryptoService ...
- python Snakes 库安装
SNAKES : A A Flexible High-Level Petri Nets Library SNAKES是python一个可以用于Petri网的库 python2安装SNAKES库: 在 ...
- yii2之ActiveForm表单使用
因目前项目并非前后端分离模式,且用到PHP的yii2框架(所有html代码,js较多内嵌在.php文件内多少采用同步提交[喷墨中...]),遂对于前端面上需要用到的yii2小组件一些整理(因是前端若涉 ...
- POJ 1154
#include<iostream> #include<stdio.h> #define MAXN 20 using namespace std; int DFS(int i, ...
- ajax--底层代码
ajax:Asynchronous JavaScript And XML,异步的js与XML.ajax并不是一种新的编程语言,而是一种使用现有标准的新方法.ajax能够在不重载整个网页的情况下与服务器 ...
- 微信小程序web-view(webview) 嵌套H5页面 唤起微信支付的实现方案
场景:小程序页面有一个web-view组件,组件嵌套的H5页面,要唤起微信支付. 先讲一下我的项目,首先我是自己开发的一个H5触屏版的商城系统,里面含有购物车,订单支付等功能.然后刚开始,我们公众号里 ...
- (转)AWK函数
http://wiki.jikexueyuan.com/project/awk/built-in-functions.html-------内置函数 http://wiki.jikexueyuan.c ...