Until2028

5 Vue＋html css 问题（西安10.9）

1 问了Vue 和react 的区别没回答不会 react

1.computed和wacth的区别

2.使用过哪种路由模式 hash和history的区别

2.2、hash模式

2.3、history 模式

3.style标签的scoped属性的原理

scoped 穿透（深度作用选择器）

4.常用的vue指令说了大概十个左右

1 v-once

2 v-show

3 v-if、v-else、v-else-if

4 v-for

5 v-text和v-html

6 v-bind

7 v-on

8 v-model

9 v-pre指令

10 v-slot指令

5.vuex的问题 commit和dispatch什么情况下使用

6.vuex数据更新视图不更新（vuex中操作数据时遇见视图不更新的情况）

6.webpack里loader和plugin是什么分别用过哪些

webpack 的核心概念都有哪些？

7 你知道哪些优化性能的方法？

7 列举你知道的Web性能优化方法。

7 优化性能-渲染

7 优化性能-浏览器缓存机制

7 优化性能-请求优化

减少请求数量

7 优化性能-CSS

7.webPack性能优化

1 优化代码运行性能

1Code Split 2 Preload / Prefetch 3 Network Cache 4 Core - js 5 PWA

Code Split :

Preload / Prefetch 懒加载

Network Cache 第二次请求资源读取缓存

Core - js core-js 是专门用来做 ES6 以及以上 API 的 polyfill

2 提升打包速度

1HotModuleReplacement（HMR/热模块替换） 2OneOf 3 Include/Exclude 4 Cache 5 Thead

3 减少代码体积

1 Tree Shaking 2 Babel 3 Image Minimizer

8.怎么判断一个对象是否为空

9.问了一些flex布局的问题

10 htm5 新特性

11 css3 新特性

12 js闭包

13 行内元素

block块级元素

14 px rem

15 Vue 生命周期钩子

Vue2.x 和 Vue3.x 生命周期对比

16 Vue数据响应你知道Vue的数据响应式原理是什么吗

16.2 vue数据的双向绑定原理 ,如何实现vue的双向绑定（面试题）

17 js 异步加载

Vue数据双向绑定原理

Vue2 的响应式原理：

Vue3.x响应式数据原理

Vue3.0 里为什么要用 Proxy API替代 defineProperty API？

Proxy 与 Object.defineProperty 优劣对比

Vue组件通信有哪些方式

vue中组件的data为什么是一个函数？而new Vue 实例里，data 可以直接是一个对象

vue中data的属性可以和methods中方法同名吗，为什么？

虚拟DOM中key的作用

vue开发中，数据更新，但视图不刷新

vue中对mixins的理解和使用

v-show和v-if指令的共同点和不同点

为什么避免v-if和v-for一起使用

Vue.set 改变数组和对象中的属性

vm.$set(obj, key, val) 做了什么？

keep-alive了解吗

什么情况下使用 Vuex？

Vuex和单纯的全局对象有什么区别

为什么 Vuex 的 mutation 中不能做异步操作？

做过哪些Vue的性能优化

Vue3有了解过吗？能说说跟Vue2的区别吗

速度更快

体积更小

更易维护

composition Api

Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？

element-ui中遇到的问题

1 问了Vue 和react 的区别没回答不会 react

1.computed和wacth的区别

watch和computed都是以Vue的依赖追踪机制为基础的，它们都试图处理这样一件事情：当某一个数据（称它为依赖数据）发生变化的时候，所有依赖这个数据的“相关”数据“自动”发生变化，也就是自动调用相关的函数去实现数据的变动

watch和computed各自处理的数据关系场景不同

1.computed擅长处理的场景：一个数据受多个数据影响

2.watch擅长处理的场景：一个数据影响多个数据

3 computed支持缓存，相依赖的数据发生改变才会重新计算；watch不支持缓存，只要监听的数据变化就会触发相应操作

4 computed不支持异步，当computed内有异步操作时是无法监听数据变化的；watch支持异步操作

5 computed属性的属性值是一函数，函数返回值为属性的属性值，computed中每个属性都可以设置set与get方法。watch监听的数据必须是data中声明过或父组件传递过来的props中的数据，当数据变化时，触发监听器

watch跟computed的区别_前端开发小司机的博客-CSDN博客_watch和computed的区别

vue中 computed和watch的一些简单理解（区别）_林_xi的博客-CSDN博客

2.使用过哪种路由模式 hash和history的区别

前端路由：原理篇_Palate的博客-CSDN博客_前端路由原理

使用过history模式，

hash 模式 url 里面永远带着 # 号，在开发当中默认使用这个模式。

hash 原理

hash 通过监听浏览器 onhashchange 事件变化，查找对应路由应用。通过改变 location.hash 改变页面路由。

history 原理

利用 html5 的history Interface 中新增的 pushState() 和 replaceState() 方法，改变页面路径。

history Interface 是浏览器历史记录栈提供的接口，可通过 back、forward、go 等，可以读取历览器历史记录栈的信息，pushState、repalceState 还可以对浏览器历史记录栈进行修改。

hash 与 history 区别对比：

vue-router实现history模式配置_注释科长的博客-CSDN博客_vue配置history模式

2.2、hash模式

1. 原理
使用window.location.hash属性及窗口的onhashchange事件，可以实现监听浏览器地址hash值变化，执行加载相应的内容。

2. 理解要点
什么是hash值

hash指的是地址中#号以及后面的字符，也称为散列值。hash也称作锚点，本身是用来做页面跳转定位的。如http://localhost/index.html#abc，这里的#abc就是hash；

hash值不会发送到服务器

hash值是不会随请求发送到服务器端的，所以改变hash，不会重新加载页面；

监听 hashchange 事件

监听 window 的 hashchange 事件，当散列值改变时，可以通过 location.hash 来获取和设置hash值；

hash值变化反应到地址栏

location.hash值的变化会直接反应到浏览器地址栏；

2.3、history 模式

1. 原理
history 对象保存了当前窗口访问过的所有页面网址。history 对象发生改变时，只会改变页面的路径，不会刷新页面。
每当 history 对象出现变化时，就会触发 popstate事件。
2. 理解要点
History 对象

HTML5的History API为浏览器的全局history对象增加的扩展方法。一般用来解决ajax请求无法通过回退按钮回到请求前状态的问题。History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。

由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航。

浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。

改变url方法

在 history 路由中，我们一定会使用window.history中的方法，常见的操作有：

back()：后退到上一个路由；
forward()：前进到下一个路由，如果有的话；
go(number)：进入到任意一个路由，正数为前进，负数为后退；
pushState(obj, title, url)：前进到指定的 URL，不刷新页面；
replaceState(obj, title, url)：用 url 替换当前的，不刷新页面；
调用这几种方式时，都会只是修改了当前页面的 URL，不会刷新页面。如果有面试官问起这个问题“如何仅修改页面的 URL，而不发送请求”，那么答案就是这 5 种方法。但前 3 个方法只是路由历史记录的前进或者后退，无法跳转到指定的 URL。

pushState和replaceState 是HTML5 新增的history对象的方法，提供了对历史记录进行修改的功能。页面不会刷新，只是导致 History 对象发生变化，地址栏会有变化。

共同点

改变url地址，不刷新页面
监听url地址变化，加载相应内容
区别

hash会在浏览器地址后面增加#号，而history可以自定义地址。
hash路由不需要服务端的支持，history需要服务端支持，因为hash值不会发给后端，而history模式修改URL地址后，再进行刷新会使用该地址发送请求。

3.style标签的scoped属性的原理

Vue style 属性 scoped 原理详解_薛定谔的panda的博客-CSDN博客_scoped的原理

当 style 标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。通过该属性，可以使组件之间的样式互不污染，实现样式的模块化。

通过给 dom 增加一个动态属性，然后 css 选择器也额外添加对应的属性来选择该 dom ，达到该样式只作用于含有该属性的 dom，实现组件样式的模块化。

scoped 原理

主要通过使用 PostCSS 来实现以下转换：

通过给 dom 增加一个动态属性，然后 css 选择器也额外添加对应的属性来选择该 dom ，达到该样式只作用于含有该属性的 dom，实现组件样式的模块化。

转换结果：

scoped 穿透（深度作用选择器）

如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

权重等级

!important，加在样式属性值后，权重值为 10000
内联样式，如：style=””，权重值为1000
ID选择器，如：#content，权重值为100
类，伪类和属性选择器，如： .content、:hover、[data-v-7668812d] 权重值为10
标签选择器和伪元素选择器，如：div、p、:before 权重值为1

通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
相同权重下：内嵌样式 > 内部样式表 > 外联样式表

我们可以通过改变权重修改样式，scoped 实质就是添加了属性选择器增加了10的权重，我们只要超过他就可以了。

如 vue-loader 提供的 >>> 实质就是为第三方组件增加了外层属性的类，并且该类也带有属性选择器，相当于增加了20的权重。

那么我们可以为组件增加一个命名空间，防止变量污染，然后在当前命名空间下添加选择器增加权重达到修改样式的目的。

4.常用的vue指令说了大概十个左右

1 v-once

只会执行一次渲染，当数据发生改变时，不会再变化

2 v-show

v-show接受一个表达式或一个布尔值。相当于给元素添加一个display属性

3 v-if、v-else、v-else-if

v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。

说明一下：v-if可以单独使用，而v-else-if,v-else必须与v-if组合使用

v-if、v-else-if都是接受一个条件或布尔值，v-else不需要参数。比较简单，看看案例：

4 v-for

v-for可用来遍历数组、对象、字符串。

只要连续生成一组结构相同，但是内容不同的HTML元素时，都用v-for批量生成

5 v-text和v-html

v-text是渲染字符串，会覆盖原先的字符串

v-html是渲染为html。{{}}双大括号和v-text都是输出为文本。那如果想输出为html。使用v-html,如下例子

6 v-bind

是用可以将标签内的属性值解析成js代码，在标签的属性中使用v-bind，双引号里的内容会被当作js解析（只能解析变量或三元表达式），如下：
如果给属性值设置为一个变量，那么可以使用v-bind
可以缩写为:<属性>="<变量>"

7 v-on

v-on用于事件绑定

语法: v-on:<事件类型>="<函数名>"
简写：@<事件类型>="<函数名>"

8 v-model

数据双向绑定指令，限制在、</code>、components中使用<br> 语法： <code>v-model="<变量名>"</code></p> <p>适用：<code><input> / <select> / <textarea> / components组件</code><br> 作用：在表单控件或者组件上创建双向绑定。</p> <h4 id="9%C2%A0v-pre%E6%8C%87%E4%BB%A4"><strong>9 <em>v-pre指令</em></strong></h4> <p> 作用：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量没有指令的节点会加快编译。<br> 注意：不需要表达式。</p> <h4 id="10%C2%A0v-slot%E6%8C%87%E4%BB%A4"><strong>10 <em>v-slot指令</em></strong></h4> <p> 适用：只能用于<code><template></code><br> 作用：提供具名插槽或需要接收 prop 的插槽。<br> 缩写：#</p> <p><a href="http://img.e-com-net.com/image/info8/94dab7daeb9c433d9204d7f1ca7bb946.jpg" target="_blank"><img alt="5 Vue＋html css 问题（西安10.9）_第2张图片" height="408" src="http://img.e-com-net.com/image/info8/94dab7daeb9c433d9204d7f1ca7bb946.jpg" width="650" style="border:1px solid black;"></a></p> <p></p> <h3 id="5.vuex%E7%9A%84%E9%97%AE%E9%A2%98%20commit%E5%92%8Cdispatch%E4%BB%80%E4%B9%88%E6%83%85%E5%86%B5%E4%B8%8B%E4%BD%BF%E7%94%A8"><br> 5.vuex的问题 commit和dispatch什么情况下使用</h3> <p></p> <p></p> <p> vuex 中的 dispatch 和 commit 的使用_雪爪鸿泥的博客-CSDN博客_vuex中的dispatch</p> <p>dispatch 异步操作 this.$store.dispatch(‘actions的方法’，arg)；调用 actions 里面的方法。</p> <p>commit 同步操作 this.$store.commit(‘mutations的方法’，arg)；调用 mutations 里面的方法。</p> <p></p> <p>dispatch：含有异步操作，例如向后台提交数据，写法： this.$store.dispatch(‘action方法名’,值)</p> <p>commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)</p> <p>使用情况:</p> <p>- dispatch：提交到 actions，action方法里可以提交mutation方法，可以包含异步操作，如向后台发送网络请求登录</p> <p>- commit：提交到 mutations，mutation方法只能是同步操作，可用于登录成功后读取用户信息保存到cookie<br> </p> <pre><code>this.$store.commit('aMutation', payload); this.$store.dispatch('aAction', payload);</code></pre> <p>Vuex的5个属性</p> <p>state：单一状态树，用一个对象就包含了全部的应用层级状态。<br> getters：就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。<br> mutations：每个mutation都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。<br> action：action 类似于mutation，不同在于：action 提交的是mutation，而不是直接变更状态;action可以包含任意异步操作。<br> modules：模块化vuex，每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。</p> <p> Vuex 使用流程：<br> 下载 vuex<br> 在 src 下创建 store 以及 index.js<br> 引入 vue 和 vuex，使用 vuex ，导出实例对象<br> 在 main.js 中引入，在.vue 文件中使用</p> <p>vuex 直接修改state 和commit ，dispatch 修改state 的区别_yuange11111的博客-CSDN博客_state.dispatch</p> <p>vuex中store.commit和store.dispatch的用法及区别_天生喜欢的博客-CSDN博客_store.commit</p> <h3 id="6.vuex%E6%95%B0%E6%8D%AE%E6%9B%B4%E6%96%B0%E8%A7%86%E5%9B%BE%E4%B8%8D%E6%9B%B4%E6%96%B0%20%EF%BC%88vuex%E4%B8%AD%E6%93%8D%E4%BD%9C%E6%95%B0%E6%8D%AE%E6%97%B6%E9%81%87%E8%A7%81%E8%A7%86%E5%9B%BE%E4%B8%8D%E6%9B%B4%E6%96%B0%E7%9A%84%E6%83%85%E5%86%B5%EF%BC%89"><br> 6.vuex数据更新视图不更新（vuex中操作数据时遇见视图不更新的情况）</h3> <p></p> <p>原因是：是vuex不能监听到数组的长度变化。</p> <p>Vue2 Object.defineProperty的本身的机制问题</p> <p>解决办法就很简单了，在每次修改数据之前，先将数据重置。</p> <pre><code class="language-javascript">state: { routeViews: [], //路由存储数组 }, mutations: { routeViews(state, obj){ state.routeViews = null //先把数组置空，不然视图不更新 state.routeViews = obj } },</code></pre> <p></p> <h3 id="6.webpack%E9%87%8Cloader%E5%92%8Cplugin%E6%98%AF%E4%BB%80%E4%B9%88%20%C2%A0%E5%88%86%E5%88%AB%E7%94%A8%E8%BF%87%E5%93%AA%E4%BA%9B"><br> 6.webpack里loader和plugin是什么分别用过哪些</h3> <p>参考答案：</p> <ul> <li>它们都是 webpack 功能的扩展点。</li> <li>loader 是加载器，主要用于代码转换，比如 JS 代码降级，CSS 预编译、模块化等</li> <li>plugins 是插件，webpack 打包流程中每个环节都提供了钩子函数，可以利用这些钩子函数参与到打包生命周期中，更改或增加 webpack 的某些功能，比如生成页面和 css 文件、压缩打包结果等<br> </li> </ul> <h4 id="webpack%20%E7%9A%84%E6%A0%B8%E5%BF%83%E6%A6%82%E5%BF%B5%E9%83%BD%E6%9C%89%E5%93%AA%E4%BA%9B%EF%BC%9F"><strong>webpack 的核心概念都有哪些？</strong></h4> <p>loader</p> <p>加载器，主要用于代码转换，比如 JS 代码降级，CSS 预编译、模块化等</p> <p>plugin</p> <p>插件，webpack 打包流程中每个环节都提供了钩子函数，可以利用这些钩子函数参与到打包生命周期中，更改或增加 webpack 的某些功能，比如生成页面和 css 文件、压缩打包结果等</p> <p>module</p> <p>模块。webpack 将所有依赖均视为模块，无论是 js、css、html、图片，统统都是模块</p> <p>entry</p> <p>入口。打包过程中的概念，webpack 以一个或多个文件作为入口点，分析整个依赖关系。</p> <p>chunk</p> <p>打包过程中的概念，一个 chunk 是一个相对独立的打包过程，以一个或多个文件为入口，分析整个依赖关系，最终完成打包合并</p> <p>bundle</p> <p>webpack 打包结果</p> <p>tree shaking</p> <p>树摇优化。在打包结果中，去掉没有用到的代码。</p> <p>HMR</p> <p>热更新。是指在运行期间，遇到代码更改后，无须重启整个项目，只更新变动的那一部分代码。</p> <p>dev server</p> <p>开发服务器。在开发环境中搭建的临时服务器，用于承载对打包结果的访问<br> </p> <h3 id="7%20%E4%BD%A0%E7%9F%A5%E9%81%93%E5%93%AA%E4%BA%9B%E4%BC%98%E5%8C%96%E6%80%A7%E8%83%BD%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%9F"><strong>7 你知道哪些优化性能的方法？</strong></h3> <p></p> <p>（1）减少HTTP请求次数，控制CSS Sprite、JavaScript与CSS源码、图片的大小，使用网页Gzip、CDN托管、data缓存、图片服务器</p> <p>（2）通过前端模板 JavaScript和数据，减少由于HTML标签导致的带宽浪费，在前端用变量保存Ajax请求结果，每次操作本地变量时，不用请求，减少请求次数。</p> <p>（3）用 innerhTML代替DOM操作，减少DOM操作次数，优化 JavaScript性能。</p> <p>（4）当需要设置的样式很多时，设置 className而不是直接操作 Style。</p> <p>（5）少用全局变量，缓存DOM节点查找的结果，减少I/O读取操作</p> <p>（6）避免使用CSS表达式，它又称动态属性，</p> <p>（7）预加载图片，将样式表放在顶部，将脚本放在底部，加上时间戳。</p> <p>（8）避免在页面的主体布局中使用表，表要在其中的内容完全下载之后才会显示出来，显示的速度比DIV+CSS布局慢。</p> <p></p> <h3 id="7%20%E5%88%97%E4%B8%BE%E4%BD%A0%E7%9F%A5%E9%81%93%E7%9A%84Web%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%96%B9%E6%B3%95%E3%80%82"><strong>7 列举你知道的Web性能优化方法。</strong></h3> <p>（1）压缩源码和图片（ JavaScript采用混淆压缩，CSS进行普通压缩，JPG图片根据具体质量压缩为50%~70%，把PNG图片从24色压缩成8色以去掉一些PNG格式信息等）。</p> <p>（2）选择合适的图片格式（颜色数多用JPG格式，而很少使用PNG格式，如果能通过服务器端判断浏览器支持WebP就用WebP或SVG格式）。</p> <p>（3）合并静态资源（减少HTTP请求）</p> <p>（4）把多个CSS合并为一个CSS，把图片组合成雪碧图。</p> <p>（5）开启服务器端的Gzip压缩（对文本资源非常有效）。</p> <p>（6）使用CDN（对公开库共享缓存）。</p> <p>（7）延长静态资源缓存时间。</p> <p>（8）把CSS放在页面头部把 JavaScript代码放在页面底部（这样避免阻塞页面渲染而使页面出现长时间的空白）</p> <h3 id="7%20%E4%BC%98%E5%8C%96%E6%80%A7%E8%83%BD-%E6%B8%B2%E6%9F%93">7 优化性能-渲染</h3> <p>重绘</p> <p>重绘指的是<strong>不影响界面布局</strong>的操作，比如更改颜色，那么根据上面的渲染讲解我们知道，重绘之后我们只需要在重复进行一下样式计算，就可以直接渲染了，对浏览器渲染的影响相对较小</p> <p>重排</p> <p>重排指的是<strong>影响界面布局</strong>的操作，比如改变宽高，隐藏节点等。对于重排就不是一个重新计算样式那么简单了，因为改变了布局，根据上面的渲染流程来看涉及到的阶段有样式计算，布局树重新生成，分层树重新生成，所以重排对浏览器的渲染影响是比较高的</p> <p>避免方法</p> <p>js 尽量减少对样式的操作，能用 css 完成的就用 css</p> <p>对 dom 操作尽量少，能用 createDocumentFragment 的地方尽量用</p> <p>如果必须要用 js 操作样式，能合并尽量合并不要分多次操作</p> <p>resize 事件最好加上防抖，能尽量少触发就少触发</p> <p>加载图片的时候，提前写好宽高</p> <p>从前端性能优化引申出来的5道经典面试题(值得收藏)_傲娇的koala的博客-CSDN博客</p> <h3 id="%C2%A07%20%E4%BC%98%E5%8C%96%E6%80%A7%E8%83%BD-%E6%B5%8F%E8%A7%88%E5%99%A8%E7%BC%93%E5%AD%98%E6%9C%BA%E5%88%B6"> 7 优化性能-浏览器缓存机制</h3> <p>缓存方式<br> 我们经常说的浏览器缓存有两种，一种是强制缓存，一种是协商缓存，因为下面有具体实现讲解，所以这里就说一下概念</p> <p>协商缓存</p> <p>协商缓存意思是文件已经被缓存了，但是否从缓存中读取是需要和服务器进行协商，具体如何协商要看请求头/响应头的字段设置，下面会说到。需要注意的是协商缓存还是发了请求的</p> <p>强制缓存</p> <p>强制缓存就是文件直接从缓存中获取，不需要发送请求<br> 缓存在哪里</p> <p>form memory cache</p> <p>这个是缓存在内存里面，优点是快速，但是具有时效性，当关闭 tab 时候缓存就会失效。</p> <p>from dist cache</p> <p>这个是缓存在磁盘里面，虽然慢但是还是比请求快，优点是缓存可以一直被保留，即使关闭 tab 页，也会一直存在</p> <h3 id="7%20%E4%BC%98%E5%8C%96%E6%80%A7%E8%83%BD-%E8%AF%B7%E6%B1%82%E4%BC%98%E5%8C%96">7 优化性能-请求优化</h3> <h4 id="%E5%87%8F%E5%B0%91%E8%AF%B7%E6%B1%82%E6%95%B0%E9%87%8F">减少请求数量</h4> <ul> <li> <p>将小图片打包成base64</p> </li> <li> <p>利用雪碧图融合多个小图片</p> </li> <li> <p>利用缓存</p> </li> </ul> <p>减少请求时间</p> <ul> <li>将js，css，html等文件能压缩的尽量压缩，减少文件大小，加快下载速度</li> <li>利用webpack打包根据路由进行懒加载，不要初始就加载全部，那样文件会很大</li> <li>能升级到高版本的http就升级到高版本（这个回答是套话），为什么高版本能提高速度具体看上面我说的那篇https文章</li> <li>建立内部CDN能更快速的获取文件</li> </ul> <h3 id="7%20%E4%BC%98%E5%8C%96%E6%80%A7%E8%83%BD-CSS">7 优化性能-<strong>CSS</strong></h3> <p>（1）正确使用 display属性， display属性会影响页面的渲染，因此要注意以下几方面。</p> <p>display:inline后不应该再使用 width、 height、 margin、 padding和float 。</p> <p>display:inline- block后不应该再使用 float。</p> <p>display:block后不应该再使用 vertical-align。 </p> <p>display:table-*后不应该再使用 margin或者float。</p> <p>（2）不滥用 float。</p> <p>（3）不声明过多的font-size。</p> <p>（4）当值为0时不需要单位。</p> <p>（5）标准化各种浏览器前缀，并注意以下几方面。</p> <ul> <li> <p>浏览器无前缀应放在最后。</p> </li> <li> <p>CSS动画只用（ -webkit-无前缀）两种即可。</p> </li> <li> <p>其他前缀包括 -webkit-、-moz-、-ms-、无前缀（ Opera浏览器改用 blink内核，所以-0-被淘汰）</p> </li> </ul> <p>（6）避免让选择符看起来像是正则表达式。高级选择器不容易读懂，执行时间也长。</p> <p>（7）尽量使用id、 class选择器设置样式（避免使用 style属性设置行内样式）</p> <p>（8）尽量使用CSS3动画。</p> <p>（9）减少重绘和回流。</p> <p></p> <p></p> <h3 id="7.webPack%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96"><br> 7.webPack性能优化</h3> <h4 id="1%20%E4%BC%98%E5%8C%96%E4%BB%A3%E7%A0%81%E8%BF%90%E8%A1%8C%E6%80%A7%E8%83%BD%C2%A0">1 优化代码运行性能 </h4> <h4 id="1Code%20Split%C2%A0%202%C2%A0%20Preload%20%2F%20Prefetch%C2%A0%20%C2%A03%C2%A0%20Network%20Cache%C2%A0%204%C2%A0%20Core%20-%20js%C2%A0%20%C2%A05%20PWA">1Code Split 2 Preload / Prefetch 3 Network Cache 4 Core - js 5 PWA</h4> <h4 id="Code%20Split%20%3A%C2%A0%C2%A0"><strong>Code Split : </strong></h4> <ol> <li>分割文件：将打包生成的文件进行分割，生成多个 js 文件。</li> <li>按需加载：需要哪个文件就加载哪个文件。</li> </ol> <p>所以我们需要将打包生成的文件进行代码分割，生成多个 js 文件，渲染哪个页面就只加载某个 js 文件，这样加载的资源就少，速度就更快。</p> <h4 id="%C2%A0%20Preload%20%2F%20Prefetch%C2%A0%20%C2%A0%E6%87%92%E5%8A%A0%E8%BD%BD%C2%A0"> Preload / Prefetch 懒加载 </h4> <ul> <li> <p><code>Preload</code>：告诉浏览器立即加载资源。</p> </li> <li> <p><code>Prefetch</code>：告诉浏览器在空闲时才开始加载资源。</p> </li> </ul> <p>我们前面已经做了代码分割，同时会使用 import 动态导入语法来进行代码按需加载（我们也叫懒加载，比如路由懒加载就是这样实现的）。</p> <h4 id="%C2%A0Network%20Cache%C2%A0%C2%A0%E7%AC%AC%E4%BA%8C%E6%AC%A1%E8%AF%B7%E6%B1%82%E8%B5%84%E6%BA%90%E8%AF%BB%E5%8F%96%E7%BC%93%E5%AD%98"> Network Cache 第二次请求资源读取缓存</h4> <p>但是这样的话就会有一个问题, 因为前后输出的文件名是一样的，都叫 main.js，一旦将来发布新版本，因为文件名没有变化导致浏览器会直接读取缓存，不会加载新资源，项目也就没法更新了。</p> <p>所以我们从文件名入手，确保更新前后文件名不一样，这样就可以做缓存了。</p> <p></p> <h4 id="%C2%A0%20Core%20-%20js%20%C2%A0%20core-js%C2%A0%E6%98%AF%E4%B8%93%E9%97%A8%E7%94%A8%E6%9D%A5%E5%81%9A%20ES6%20%E4%BB%A5%E5%8F%8A%E4%BB%A5%E4%B8%8A%20API%20%E7%9A%84%C2%A0polyfill"> Core - js <code>core-js</code> 是专门用来做 ES6 以及以上 API 的 <code>polyfill</code></h4> <p><code>polyfill</code>翻译过来叫做垫片/补丁。就是用社区上提供的一段代码，让我们在不兼容某些新特性的浏览器上，使用该新特性</p> <p>js 代码仍然存在兼容性问题，一旦遇到低版本浏览器会直接报错。所以我们想要将 js 兼容性问题彻底解决</p> <p>PWA 提供离线体验 (不谈)</p> <p>渐进式网络应用程序(progressive web application - PWA)：是一种可以提供类似于 native app(原生应用程序) 体验的 Web App 的技术。</p> <p>其中最重要的是，在 <strong>离线(offline)</strong> 时应用程序能够继续运行功能。</p> <h4 id="2%20%E6%8F%90%E5%8D%87%E6%89%93%E5%8C%85%E9%80%9F%E5%BA%A6%C2%A0">2 提升打包速度 </h4> <h4 id="1HotModuleReplacement%EF%BC%88HMR%2F%E7%83%AD%E6%A8%A1%E5%9D%97%E6%9B%BF%E6%8D%A2%EF%BC%89%202OneOf%C2%A0%20%C2%A03%20Include%2FExclude%204%20Cache%205%20Thead">1HotModuleReplacement（HMR/热模块替换） 2OneOf 3 Include/Exclude 4 Cache 5 Thead</h4> <p><strong>HotModuleReplacement</strong>（HMR/热模块替换）：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。</p> <p><strong>OneOf </strong>：打包时每个文件都会经过所有 loader 处理，虽然因为 test 正则原因实际没有处理上，但是都要过一遍。比较慢。</p> <p>Include/Exclude：开发时我们需要使用第三方的库或插件，所有文件都下载到 node_modules 中了。而这些文件是不需要编译可以直接使用的。所以我们在对 js 文件处理时，要排除 node_modules 下面的文件。</p> <p><strong>Cache</strong>：开启缓存</p> <p>缓存目录每次打包时 js 文件都要经过 Eslint 检查和 Babel 编译，速度比较慢。</p> <p>我们可以缓存之前的 Eslint 检查和 Babel 编译结果，这样第二次打包时速度就会更快了。、</p> <p><strong>Thead</strong>：</p> <p>而对 js 文件处理主要就是 eslint 、babel、Terser 三个工具，所以我们要提升它们的运行速度。</p> <p>我们可以开启多进程同时处理 js 文件，这样速度就比之前的单进程打包更快了。</p> <p> 1如何获取 CPU 的核数，因为每个电脑都不一样。</p> <pre><code class="language-javascript">// nodejs核心模块，直接使用 const os = require("os"); // cpu核数 const threads = os.cpus().length; </code></pre> <p></p> <p>2 下载包</p> <p>npm i thread-loader -D</p> <p>3 使用</p> <pre><code>use: [ { loader: "thread-loader", // 开启多进程 options: { workers: threads, // 数量 }, },</code></pre> <h4 id="3%C2%A0%20%E5%87%8F%E5%B0%91%E4%BB%A3%E7%A0%81%E4%BD%93%E7%A7%AF%C2%A0">3 减少代码体积 </h4> <h4 id="1%20Tree%20Shaking%C2%A0%202%20Babel%C2%A0%203%C2%A0%20Image%20Minimizer">1 Tree Shaking 2 Babel 3 Image Minimizer</h4> <p><strong>1 Tree Shaking</strong></p> <p>开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。</p> <p>如果没有特殊处理的话我们打包时会引入整个库，但是实际上可能我们可能只用上极小部分的功能。这样将整个库都打包进来，体积就太大了。</p> <p>Webpack 已经默认开启了这个功能，无需其他配置</p> <p><strong>2 Babel </strong></p> <p>Babel 为编译的每个文件都插入了辅助代码，使代码体积过大！</p> <p>Babel 对一些公共方法使用了非常小的辅助代码，比如 <code>_extend</code>。默认情况下会被添加到每一个需要它的文件中。</p> <p>你可以将这些辅助代码作为一个独立模块，来避免重复引入</p> <p><strong>3 Image Minimizer压缩图片的插件</strong></p> <p>开发如果项目中引用了较多图片，那么图片体积会比较大，将来请求速度比较慢。</p> <p>我们可以对图片进行压缩，减少图片体积。</p> <p><strong>注意：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。</strong></p> <p> image-minimizer-webpack-plugin: 用来压缩图片的插件</p> <p></p> <h3 id="8.%E6%80%8E%E4%B9%88%E5%88%A4%E6%96%AD%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%E6%98%AF%E5%90%A6%E4%B8%BA%E7%A9%BA"><br> 8.怎么判断一个对象是否为空</h3> <p></p> <p>1.将json对象转化为json字符串，再判断该字符串是否为"{}"</p> <p>2.for in 循环判断若不为空，可遍历，返回false 空返回true</p> <p>3.jquery的isEmptyObject方法</p> <p>4 Object.keys()方法，返回对象的属性名组成的一个数组，若长度为0，则为空对象（ES6的写法） console.log(Object.keys(obj).length==0);//返回true</p> <p>5 Object.getOwnPropertyNames方法获取对象的属性名，存到数组中，若长度为0，则为空对象 console.log(Object.getOwnPropertyNames(obj).length==0);//返回true</p> <p></p> <h3 id="9.%E9%97%AE%E4%BA%86%E4%B8%80%E4%BA%9Bflex%E5%B8%83%E5%B1%80%E7%9A%84%E9%97%AE%E9%A2%98%C2%A0"><br> 9.问了一些flex布局的问题 </h3> <p>1》主轴上对齐方式：</p> <p>justify-content：flex-start | flex-end | center | space-between | space-around;</p> <p>2》交叉轴上对齐方式</p> <p>align-items：flex-start | flex-end | center | baseline | stretch;</p> <p>3》项目排列方向</p> <p>flex-direction：row | row-reverse | column | column-reverse;</p> <p>4》换行方式</p> <p>flex-wrap：nowrap（不换行） | wrap（向下换） | wrap-reverse（向上换）;</p> <p>5》flex-flow</p> <p>flex-direction和flex-wrap的简写</p> <p>6》多根轴线的对齐方式</p> <p>align-content：flex-start | flex-end | center | space-between | space-around | stretch;</p> <p>6》多根轴线的对齐方式</p> <p>2）Flex布局子元素属性</p> <ul> <li>order定义自身排列顺序。数值越小，越靠前，默认为0。-1/0/1/2/3/...</li> <li>flex-grow 定义自身放大比例，默认为0不放大。例如：1/2/1=25%:50%:25%</li> <li>flex-shrink定义了空间不足时自身缩小比例，默认为1自动缩小，0不缩小。</li> <li>flex-basis定义最小空间，默认值为auto，即自身的本来大小。</li> <li>flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。</li> <li>align-self定义自身对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。</li> </ul> <h3 id="10%20htm5%20%E6%96%B0%E7%89%B9%E6%80%A7%C2%A0">10 htm5 新特性 </h3> <p>HTML5的新特性_龟苓膏先生的博客-CSDN博客_html5新特性</p> <p><strong>一、语义化标签</strong></p> <p>标签的语义化，就是根据内容结构，选择合适的标签编写相应的代码内容。正确的标签做正确的事。语义化标签的好处：1.方便开发人员的代码阅读和后期维护。2.提高用户体验（img 的 alt，title）。3.有利于seo搜索引擎优化。4.便于网络爬虫解析文档。</p> <p> <header><header/> 定义文档的头部</p> <p><detailes><detailes/> 定义文档某部分细节</p> <p> <dialog><dialog/> 定义对话框，提示框</p> <p><strong>二、新增Input表单的类型、和属性</strong></p> <p>1.类型</p> <p style="margin-left:0;"><span style="color:#4d4d4d;"><span style="background-color:#ffffff;"> tel、number、date、time、week、month、url、email、color、rang</span></span></p> <p><span style="color:#4d4d4d;"><span style="background-color:#ffffff;">2.属性<br> required: ture 必填属性</span></span></p> <p><span style="color:#4d4d4d;"><span style="background-color:#ffffff;"> placeholder:'提示文本'</span></span></p> <p><span style="color:#4d4d4d;"><span style="background-color:#ffffff;"> autofocus 自动聚焦</span></span></p> <p><span style="color:#4d4d4d;"><span style="background-color:#ffffff;"> pattern 正则验证内容</span></span></p> <p><span style="color:#4d4d4d;"><span style="background-color:#ffffff;"> multiple 可选多个值（）上传文件</span></span></p> <p><span style="color:#4d4d4d;"><span style="background-color:#ffffff;"> width，height 宽度高度 type=image</span></span></p> <p><span style="color:#4d4d4d;"><span style="background-color:#ffffff;"> autocomplete on/off 是否展示历史输入</span></span></p> <p><span style="color:#4d4d4d;"><span style="background-color:#ffffff;"> min/max 设置元素最大值最小值</span></span></p> <p><strong>三、audio、video音频和视频</strong></p> <p> HTML5 提供了播放音频、视频文件的标准，即使用 <audio>、<video> 元素，元素内允许使用多个 <source> 元素. <source> 元素可以链接不同类型的文件，浏览器将使用第一个支持的文件。</p> <p><strong>四、Canvas绘图</strong></p> <p><canvas> 标签只是图形容器，您必须使用脚本来绘制图形。</p> <p>你可以通过多种方法使用 canvas 绘制路径,盒、圆、字符以及添加图像。</p> <p><strong>五、SVG绘图</strong></p> <p><strong>六、地理定位</strong></p> <p><strong>七、拖拽API</strong></p> <p>拖放是一种常见的特性，即抓取对象以后拖到另一个位置。</p> <p>在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放</p> <p><strong>八、WebStorage</strong></p> <p>使用HTML5可以在本地存储用户的浏览数据。</p> <p>LocalStorage和SessionStorage都是HTML5提出的存储方案。大小一般为5MB，可以存储更多信息。均受到同源策略的限制</p> <p><strong>九、WebWorker</strong></p> <p> 当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。</p> <p>web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。</p> <p></p> <p><strong>十、WebSocket</strong></p> <p>WebSocket是HTML5开始提供的一种在单个 TCP 连接上进行全双工通讯的协议。在WebSocket API中，浏览器和服务器只需要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。浏览器通过 JavaScript 向服务器发出建立 WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP 连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 <strong>send()</strong> 方法来向服务器发送数据，并通过 <strong>onmessage</strong> 事件来接收服务器返回的数据。</p> <h3 id="11%20css3%20%E6%96%B0%E7%89%B9%E6%80%A7%C2%A0"><br><br> 11 css3 新特性 </h3> <p>关于CSS3的新特性（面试经典）_我，小李！的博客-CSDN博客_css3新特性面试</p> <p><br> 1.过渡属性 <br> transition：要改变的属性，花费时间，效果曲线(默认ease)，延迟时间(默认0)</p> <p> 2.动画属性<br> animation：动画名称，一个周期花费时间，运动曲线（默认ease），动画延迟（默认0），播放次数（默认1），是否反向播放动画（默认normal），是否暂停动画（默认running）</p> <p> 3.圆角属性：<br> CSS border-radius - 指定每个角</p> <p> 4.引入了RGBA 颜色函数</p> <p>5.背景色渐变 background - image: linear - gradient(red, yellow);<br> 6.盒子阴影 <br> box - shadow: 10px 10px 5px #888888;<br> 7.盒子新特性 box - sizing: border - box; 算布局<br> 8.justify - content 在容器中央对齐弹性项目<br> 8.justify - content 在容器中央对齐弹性项目<br> 10.transform（旋转）<br> 11.准许文字换行 word-wrap</p> <p></p> <h3 id="12%20js%E9%97%AD%E5%8C%85">12 js闭包</h3> <p>理解：主要是为了设计私有的方法和变量。<br> 优点：可以避免全局变量造成污染。<br> 缺点：闭包会常驻内存，增加内存使用量，使用不当会造成内存泄漏。<br> 特征：（1）函数嵌套函数。（2）在函数内部可以引用外部的参数和变量。（3）参数和变量不会以垃圾回收机制回收。</p> <h3 id="13%20%E8%A1%8C%E5%86%85%E5%85%83%E7%B4%A0">13 行内元素</h3> <p>span、img、a、lable、input、abbr（缩写）、em（强调）、big、cite（引用）、i（斜体）、q（短引用）、textarea、select、small、sub、sup，strong、u（下划线）、button（默认display：inline-block））</p> <h4 id="15%20%E5%B8%B8%E8%A7%81%E7%9A%84block%E5%9D%97%E7%BA%A7%E5%85%83%E7%B4%A0%EF%BC%9A"><strong>block块级元素</strong></h4> <p>div、p、h1…h6、ol、ul、dl、table、address、blockquote、form</p> <p><strong>inline-block内联块元素</strong></p> <p>img、input</p> <h3 id="14%20px%20rem%C2%A0">14 px rem </h3> <p></p> <h3 id="15%20Vue%20%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90%C2%A0">15 Vue 生命周期钩子 </h3> <p><strong>组件的生命周期共分为三个阶段：挂载阶段、更新阶段、销毁阶段。</strong></p> <p>每个阶段对应的钩子函数分别为：</p> <blockquote> <ol> <li>挂载阶段：beforeCreate、created、beforeMount、mounted</li> <li>更新阶段：beforeUpdate、updated</li> <li>销毁阶段：beforeDestroy、destroyed</li> </ol> </blockquote> <h4 id="Vue2.x%20%E5%92%8C%20Vue3.x%20%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%AF%B9%E6%AF%94">Vue2.x 和 Vue3.x 生命周期对比</h4> <p><img alt="在这里插入图片描述" src="http://img.e-com-net.com/image/info8/895ae2e9a7684857bc79fa382cd39674.jpg" width="0" height="0"></p> <p> 使用<code><keep-alive></code> 组件会将数据保留在内存中，比如我们不想每次看到一个页面都重新加载数据，就可以使用<code><keep-alive></code> 组件解决。</p> <p>Vue2 </p> <p>1. beforeCreate() 创建前</p> <p>2. created()创建后</p> <p>3. beforeMount() 挂载前</p> <p>4. mounted()挂载完成</p> <p>5. beforeUpdate() 更新前</p> <p>6. updated() 更新后</p> <p>7. beforeDestroy() 销毁前</p> <p>8. destroyed() 销毁完成</p> <p><br> Vue3 </p> <p>Vue3生命周期钩子<br> setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method<br> onBeforeMount() : 组件挂载到节点上之前执行的函数；<br> onMounted() : 组件挂载完成后执行的函数；<br> onBeforeUpdate(): 组件更新之前执行的函数；<br> onUpdated(): 组件更新完成之后执行的函数；<br> onBeforeUnmount(): 组件卸载之前执行的函数；<br> onUnmounted(): 组件卸载完成后执行的函数；</p> <p><br> onActivated(): 被包含在 <keep-alive> 中的组件，会多出两个生命周期钩子函数，被激活时执行；<br> onDeactivated(): 比如从 A 组件，切换到 B 组件，A 组件消失时执行；<br> onErrorCaptured(): 当捕获一个来自子孙组件的异常时激活钩子函数。</p> <p>Vue3 生命周期钩子函数_叶子_o的博客-CSDN博客_vue3钩子函数</p> <p></p> <p>父子组件钩子函数在三个阶段的代码执行顺序</p> <p>挂载：父亲created> 子created > 子mounted> 父亲mounted><br> 更新：父亲beforeUpdate > 子beforeUpdated > 子updated > 父亲updated<br> 销毁：父亲beforeDestroy> 子beforeDestroy > 子destroyed> 父destroyed</p> <p></p> <p>一起来聊聊Vue3的这“一生（生命周期）”_李公子丶的博客-CSDN博客_vue3生命周期图</p> <p></p> <h3 id="16%20Vue%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%C2%A0%C2%A0%E4%BD%A0%E7%9F%A5%E9%81%93Vue%E7%9A%84%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86%E6%98%AF%E4%BB%80%E4%B9%88%E5%90%97">16 Vue数据响应你知道Vue的数据响应式原理是什么吗</h3> <p>vue的数据响应式就是当数据发生变化，通知改变的代码。数据响应式原理的核心就是采用了数据劫持结合发布者-订阅者模式的方式来实现数据的响应式,通过Object.defineProperty()对数据进行拦截，把这些属性全部转换成getter/setter，get（）方法可以读取数据、收集依赖，set（）方法可以改写数据，在数据变动时会对数据进行比较，如果数据发生了变化，会发布消息通知订阅者，触发监听回调，更新视图。<br> </p> <h4 id="16.2%C2%A0vue%E6%95%B0%E6%8D%AE%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86%20%2C%E5%A6%82%E4%BD%95%E5%AE%9E%E7%8E%B0vue%E7%9A%84%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%EF%BC%88%E9%9D%A2%E8%AF%95%E9%A2%98%EF%BC%89">16.2 vue数据的双向绑定原理 ,如何实现vue的双向绑定（面试题）</h4> <p>面试题53：vue数据的双向绑定原理（如何实现vue的双向绑定）_The..Fuir的博客-CSDN博客_vue双向绑定的原理面试题</p> <p>采用“数据劫持”结合“发布者-订阅者”模式的方式，通过“Object.defineProperty()”方法来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调</p> <p>概念：双向绑定是vue的一个核心功能，所谓双向绑定就是当视图发生改变的时候传递给VM(ViewModel ),让数据得到更新，当数据发生改变的时候传给VM(ViewModel ),使得视图发生变化</p> <p>利用 Object.defineProperty 自己实现双向数据绑定</p> <pre><code class="language-javascript">//利用 Object.defineProperty 自己实现双向数据绑定 <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['txt'] }, set: function (newValue) { document.getElementById('txt').value = newValue document.getElementById('show').innerHTML = newValue } }) document.addEventListener('keyup', function (e) { obj.txt = e.target.value }) </script></code></pre> <p></p> <h3 id="17%20js%20%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD">17 js 异步加载</h3> <p><strong>//1.async 只能加载外部脚本</strong></p> <p><script src="js/index.js" async="async"></script></p> <p>②defer 异步加载，但要等到dom文档全部解析完才会被执行。只有IE能用内部外部js均可使用</p> <p><strong>//2.defer 只能IE使用，文档解析完成以后才会去执行</strong></p> <p> 1.但要等dom文档全部解析完（dom树生成）才会被执行。</p> <p> 2.只有IE能用；</p> <p><script src="js/index.js" defer="defer"></script></p> <p><strong>3 按需求加载，考虑浏览器兼容 script .on ready state change 函数</strong></p> <pre><code class="language-javascript">function loadScript(url,callback){ var script = document.createElement("script"); if(script.readyState){ IE浏览器兼容 script.onreadystatechange = function(){ if(script.readyState == "complete" || script.readState == "loaded"){ callback() } } }else{ 大部分浏览器兼容 script.onload = function(){ callback() } } script.src = url; document.head.appendChild(script) } loadScript("08.js",function(){ test() }) //外部js function test(){ console.log("hello world") } </code></pre> <p>document三个状态</p> <p>①loading 加载中状态，dom树正在绘制中</p> <p>②interactive 活跃状态，dom树绘制完成</p> <p>③complete 完成状态（老版本的浏览器可能是loaded），dom树绘制完成并且所有的资源下载完成</p> <h2 id="Vue%E6%95%B0%E6%8D%AE%E5%8F%8C%E5%90%91%E7%BB%91%E5%AE%9A%E5%8E%9F%E7%90%86">Vue数据双向绑定原理</h2> <p>实现mvvm的数据双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来给各个属性添加setter，getter并劫持监听，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：<br> 1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者<br> 2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数<br> 3、实现一个Watcher，作为连接Observer和Compile的桥梁，能够订阅并收到每个属性变动的通知，执行指令绑定的相应回调函数，从而更新视图<br> </p> <p></p> <h3 id="Vue2%20%E7%9A%84%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86%EF%BC%9A">Vue2 的响应式原理：</h3> <p>什么是响应式，也即是说，数据发生改变的时候，视图会重新渲染，匹配更新为最新的值。<br> Object.defineProperty 为对象中的每一个属性，设置 get 和 set 方法，每个声明的属性，都会有一个专属的依赖收集器 subs，当页面使用到某个属性时，触发 ObjectdefineProperty - get函数，页面的 watcher 就会被放到属性的依赖收集器 subs 中，在数据变化时，通知更新；<br> 当数据改变的时候，会触发Object.defineProperty - set函数，数据会遍历自己的依赖收集器 subs，逐个通知 watcher，视图开始更新；</p> <h3 id="Vue3.x%E5%93%8D%E5%BA%94%E5%BC%8F%E6%95%B0%E6%8D%AE%E5%8E%9F%E7%90%86">Vue3.x响应式数据原理</h3> <p>Vue3.x改用Proxy替代Object.defineProperty。<br> 因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。<br> Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？<br> 判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理，这样就实现了深度观测。</p> <p> reactive 函数，就是利用各种集合来存储原始数据和响应式数据的映射关系，以便快速根据这种映射关系拿到对应的数据</p> <p><br> 监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。</p> <p></p> <p>Vue3 源码解析系列 - 响应式原理（reactive 篇） - 知乎</p> <p></p> <h3 id="Vue3.0%20%E9%87%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%A6%81%E7%94%A8%20Proxy%20API%E6%9B%BF%E4%BB%A3%20defineProperty%20API%EF%BC%9F">Vue3.0 里为什么要用 Proxy API替代 defineProperty API？</h3> <p><br> 1.defineProperty API 的局限性最大原因是它只能针对单例属性做监听。<br> Vue2.x中的响应式实现正是基于defineProperty中的descriptor，对 data 中的属性做了遍历 + 递归，为每个属性设置了 getter、setter。这也就是为什么 Vue 只能对 data 中预定义过的属性做出响应的原因。<br> 2.Proxy API的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性，将会带来很大的性能提升和更优的代码。<br> Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。<br> 3.响应式是惰性的。<br> 在 Vue.js 2.x 中，对于一个深层属性嵌套的对象，要劫持它内部深层次的变化，就需要递归遍历这个对象，执行 Object.defineProperty 把每一层对象数据都变成响应式的，这无疑会有很大的性能消耗。<br> 在 Vue.js 3.0 中，使用 Proxy API 并不能监听到对象内部深层次的属性变化，因此它的处理方式是在 getter 中去递归响应式，这样的好处是真正访问到的内部属性才会变成响应式，简单的可以说是按需实现响应式，减少性能消耗。</p> <p></p> <h3 id="Proxy%20%E4%B8%8E%20Object.defineProperty%20%E4%BC%98%E5%8A%A3%E5%AF%B9%E6%AF%94">Proxy 与 Object.defineProperty 优劣对比</h3> <p></p> <p>1.Proxy 可以直接监听对象而非属性；<br> 2.Proxy 可以直接监听数组的变化；<br> 3.Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是 Object.defineProperty 不具备的；<br> 4.Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；<br> 5.Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；<br> 6.Object.defineProperty 的优势如下:<br> 兼容性好，支持 IE9，而 Proxy 的存在浏览器兼容性问题,而且无法用 polyfill 磨平，因此 Vue 的作者才声明需要等到下个大版本( 3.0 )才能用 Proxy 重写。</p> <h2 id="Vue%E7%BB%84%E4%BB%B6%E9%80%9A%E4%BF%A1%E6%9C%89%E5%93%AA%E4%BA%9B%E6%96%B9%E5%BC%8F">Vue组件通信有哪些方式</h2> <p>1.父传子：props<br> 父组件通过 props 向下传递数据给子组件。注：组件中的数据共有三种形式：data、props、computed</p> <p>2.父传子孙：provide 和 inject<br> 父组件定义provide方法return需要分享给子孙组件的属性，子孙组件使用 inject 选项来接收指定的我们想要添加在这个实例上的属性；</p> <p>3.子传父：通过事件形式<br> 子组件通过 $emit()给父组件发送消息，父组件通过v-on绑定事件接收数据。</p> <p>4.父子、兄弟、跨级：eventBus.js<br> 这种方法通过一个空的 Vue 实例作为中央事件总线（事件中心）,用它来（e m i t ）触发事件和（ emit）触发事件和（emit）触发事件和（on）监听事件，巧妙而轻量地实现了任何组件间的通信。<br> 6.vuex<br> vuex 是 vue 的状态管理器，存储的数据是响应式的。只需要把共享的值放到vuex中，其他需要的组件直接获取使用即可；</p> <p></p> <p><br> </p> <h2 id="vue%E4%B8%AD%E7%BB%84%E4%BB%B6%E7%9A%84data%E4%B8%BA%E4%BB%80%E4%B9%88%E6%98%AF%E4%B8%80%E4%B8%AA%E5%87%BD%E6%95%B0%EF%BC%9F%E8%80%8Cnew%20Vue%20%E5%AE%9E%E4%BE%8B%E9%87%8C%EF%BC%8Cdata%20%E5%8F%AF%E4%BB%A5%E7%9B%B4%E6%8E%A5%E6%98%AF%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1">vue中组件的data为什么是一个函数？而new Vue 实例里，data 可以直接是一个对象</h2> <p>我们知道，Vue组件其实就是一个Vue实例。</p> <p>JS中的实例是通过构造函数来创建的，每个构造函数可以new出很多个实例，那么每个实例都会继承原型上的方法或属性。</p> <p>Vue的data数据其实是Vue原型上的属性，数据存在于内存当中。Vue为了保证每个实例上的data数据的独立性，规定了必须使用函数，而不是对象。</p> <p>因为使用对象的话，每个实例（组件）上使用的data数据是相互影响的，这当然就不是我们想要的了。对象是对于内存地址的引用，直接定义个对象的话组件之间都会使用这个对象，这样会造成组件之间数据相互影响。</p> <p>使用函数后，使用的是data()函数，data()函数中的this指向的是当前实例本身，就不会相互影响了。</p> <p>而 new Vue 的实例，是不会被复用的，因此不存在引用对象的问题。<br> </p> <h3 id="vue%E4%B8%ADdata%E7%9A%84%E5%B1%9E%E6%80%A7%E5%8F%AF%E4%BB%A5%E5%92%8Cmethods%E4%B8%AD%E6%96%B9%E6%B3%95%E5%90%8C%E5%90%8D%E5%90%97%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%EF%BC%9F">vue中data的属性可以和methods中方法同名吗，为什么？</h3> <p>可以同名，methods的方法名会被data的属性覆盖；调试台也会出现报错信息，但是不影响执行；<br> 原因：源码定义的initState函数内部执行的顺序：props>methods>data>computed>watch</p> <h2 id="%E8%99%9A%E6%8B%9FDOM%E4%B8%ADkey%E7%9A%84%E4%BD%9C%E7%94%A8">虚拟DOM中key的作用</h2> <p>简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。<br> 复杂的说：当状态中的数据发生了变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：</p> <p>旧虚拟DOM中找到了与新虚拟DOM相同的key<br> 1.若虚拟DOM中的内容没有变，直接使用之前的真是DOM<br> 2.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM<br> 旧虚拟DOM中未找到与新虚拟DOM相同的key<br> 1.根据数据创建新的真实DOM，随后渲染到页面</p> <h3 id="vue%E5%BC%80%E5%8F%91%E4%B8%AD%EF%BC%8C%E6%95%B0%E6%8D%AE%E6%9B%B4%E6%96%B0%EF%BC%8C%E4%BD%86%E8%A7%86%E5%9B%BE%E4%B8%8D%E5%88%B7%E6%96%B0">vue开发中，数据更新，但视图不刷新</h3> <p><em><strong>我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下：</strong></em></p> <p><strong>第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到；</strong></p> <p><strong>第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,Vue识别不到；</strong></p> <p><strong> ①</strong> 可以利用<strong>this.$set() </strong> this.$set(this.arr, 0, "列表0")</p> <p><strong>② </strong>可以利用<strong>vue对数组重写的splice</strong>方法 this.arr.splice(0, 1, "列表0")</p> <p><strong> ③ </strong> 重新声明一个变量<strong>深拷贝</strong>一下当前这个数组然后<strong>重新赋值</strong>即可</p> <p><strong> 4</strong> 可以利用<strong>Object.assign()</strong>方法（对象）</p> <p></p> <p></p> <p></p> <p></p> <h2 id="vue%E4%B8%AD%E5%AF%B9mixins%E7%9A%84%E7%90%86%E8%A7%A3%E5%92%8C%E4%BD%BF%E7%94%A8">vue中对mixins的理解和使用</h2> <p>mixins是一种分发 Vue 组件中可复用功能的非常灵活的方式。混合对象可以包含任意组件选项。当组件使用混合对象时，所有混合对象的选项将被混入该组件本身的选项。<br> 而mixins引入组件之后，则是将组件内部的内容如data等方法、method等属性与父组件相应内容进行合并。相当于在引入后，父组件的各种属性方法都被扩充了。<br> </p> <h2 id="v-show%E5%92%8Cv-if%E6%8C%87%E4%BB%A4%E7%9A%84%E5%85%B1%E5%90%8C%E7%82%B9%E5%92%8C%E4%B8%8D%E5%90%8C%E7%82%B9">v-show和v-if指令的共同点和不同点</h2> <p>相同点：<br> v-show和v-if都能控制元素的显示和隐藏。<br> 不同点：<br> 1.实现本质方法不同:v-show本质就是通过设置css中的display设置为none;控制隐藏v-if是动态的向DOM树内添加或者删除DOM元素;<br> 2.v-show都会编译，初始值为false，只是将display设为none，但它也编译了;v-if初始值为false，就不会编译了<br> 总结：v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，如果要频繁切换某节点时，故v-show性能更好一点。<br> </p> <h2 id="%E4%B8%BA%E4%BB%80%E4%B9%88%E9%81%BF%E5%85%8Dv-if%E5%92%8Cv-for%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8">为什么避免v-if和v-for一起使用</h2> <p>vue2.x版本中，当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级；<br> vue3.x版本中，当 v-if 与 v-for 一起使用时，v-if 具有比 v-for 更高的优先级。<br> 官网明确指出：避免 v-if 和 v-for 一起使用，永远不要在一个元素上同时使用 v-if 和 v-for。</p> <p>可以先对数据在计算数据中进行过滤，然后再进行遍历渲染；<br> 操作和实现起来都没有什么问题，页面也会正常展示。但是会带来不必要的性能消耗；<br> </p> <h2 id="Vue.set%20%E6%94%B9%E5%8F%98%E6%95%B0%E7%BB%84%E5%92%8C%E5%AF%B9%E8%B1%A1%E4%B8%AD%E7%9A%84%E5%B1%9E%E6%80%A7">Vue.set 改变数组和对象中的属性</h2> <p>在一个组件实例中，只有在data里初始化的数据才是响应的，Vue不能检测到对象属性的添加或删除，没有在data里声明的属性不是响应的,所以数据改变了但是不会在页面渲染；<br> 解决办法：<br> 使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上</p> <h2 id="vm.%24set(obj%2C%20key%2C%20val)%20%E5%81%9A%E4%BA%86%E4%BB%80%E4%B9%88%EF%BC%9F">vm.$set(obj, key, val) 做了什么？</h2> <p>由于 Vue 无法探测对象新增属性或者通过索引为数组新增一个元素，所以这才有了 vm.s e t ，它是 V u e . s e t 的别名。 v m . set，它是 Vue.set 的别名。 vm.set，它是Vue.set的别名。vm.set 用于向响应式对象添加一个新的 property，并确保这个新的 property 同样是响应式的，并触发视图更新。</p> <p>为对象添加一个新的响应式数据：调用 defineReactive 方法为对象增加响应式数据，然后执行 dep.notify 进行依赖通知，更新视图<br> 为数组添加一个新的响应式数据：通过 splice 方法实现<br> </p> <h2 id="keep-alive%E4%BA%86%E8%A7%A3%E5%90%97">keep-alive了解吗</h2> <p>< keep-alive >是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。</p> <p>< keep-alive > 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。</p> <h2 id="%E4%BB%80%E4%B9%88%E6%83%85%E5%86%B5%E4%B8%8B%E4%BD%BF%E7%94%A8%20Vuex%EF%BC%9F">什么情况下使用 Vuex？</h2> <p>如果应用够简单，最好不要使用 Vuex，一个简单的 store 模式即可；<br> 需要构建一个中大型单页应用时，使用Vuex能更好地在组件外部管理状态；</p> <h2 id="Vuex%E5%92%8C%E5%8D%95%E7%BA%AF%E7%9A%84%E5%85%A8%E5%B1%80%E5%AF%B9%E8%B1%A1%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB">Vuex和单纯的全局对象有什么区别</h2> <p>Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。<br> 不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。<br> </p> <h3 id="%E4%B8%BA%E4%BB%80%E4%B9%88%20Vuex%20%E7%9A%84%20mutation%20%E4%B8%AD%E4%B8%8D%E8%83%BD%E5%81%9A%E5%BC%82%E6%AD%A5%E6%93%8D%E4%BD%9C%EF%BC%9F">为什么 Vuex 的 mutation 中不能做异步操作？</h3> <p>每个mutation执行完成后都会对应到一个新的状态变更，这样devtools就可以打个快照存下来，然后就可以实现 time-travel 了。如果mutation支持异步操作，就没有办法知道状态是何时更新的，无法很好的进行状态的追踪，给调试带来困难</p> <p></p> <h2 id="%E5%81%9A%E8%BF%87%E5%93%AA%E4%BA%9BVue%E7%9A%84%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96">做过哪些Vue的性能优化</h2> <p>编码阶段</p> <ul> <li>尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher</li> <li>v-if和v-for不能连用</li> <li>如果需要使用v-for给每项元素绑定事件时使用事件代理</li> <li>SPA 页面采用keep-alive缓存组件</li> <li>在更多的情况下，使用v-if替代v-show</li> <li>key保证唯一</li> <li>使用路由懒加载、异步组件</li> <li>防抖、节流</li> <li>第三方模块按需导入</li> <li>长列表滚动到可视区域动态加载</li> <li>图片懒加载</li> </ul> <p>SEO优化</p> <ul> <li>服务端渲染SSR</li> <li>预渲染</li> </ul> <p>打包优化</p> <ul> <li>压缩代码</li> <li>Tree Shaking/Scope Hoisting</li> <li>使用cdn加载第三方模块</li> <li>多线程打包happypack</li> <li>splitChunks抽离公共文件</li> <li>sourceMap优化</li> </ul> <h2 id="Vue3%E6%9C%89%E4%BA%86%E8%A7%A3%E8%BF%87%E5%90%97%EF%BC%9F%E8%83%BD%E8%AF%B4%E8%AF%B4%E8%B7%9FVue2%E7%9A%84%E5%8C%BA%E5%88%AB%E5%90%97">Vue3有了解过吗？能说说跟Vue2的区别吗</h2> <h4 id="%E9%80%9F%E5%BA%A6%E6%9B%B4%E5%BF%AB"><strong>速度更快</strong></h4> <p><code>vue3</code>相比<code>vue2</code></p> <ul> <li>重写了虚拟<code>Dom</code>实现</li> <li>编译模板的优化</li> <li>更高效的组件初始化</li> </ul> <h4 id="%E4%BD%93%E7%A7%AF%E6%9B%B4%E5%B0%8F"><strong>体积更小</strong></h4> <p>通过<code>webpack</code>的<code>tree-shaking</code>功能，可以将无用模块“剪辑”，仅打包需要的</p> <p>能够<code>tree-shaking</code>，有两大好处：</p> <h4 id="%E6%9B%B4%E6%98%93%E7%BB%B4%E6%8A%A4"><strong>更易维护</strong></h4> <p><strong>compositon Api</strong></p> <ul> <li>可与现有的<code>Options API</code>一起使用</li> <li>灵活的逻辑组合与复用</li> <li><code>Vue3</code>模块可以和其他框架搭配使用 <strong>Typescript</strong></li> </ul> <p><strong>更易使用</strong></p> <p>响应式 <code>Api</code> 暴露出来</p> <h3 id="composition-Api"><strong>composition Api</strong></h3> <p>composition Api，也就是组合式<code>api</code>，通过这种形式，我们能够更加容易维护我们的代码，将相同功能的变量进行一个集中式的管理</p> <p class="img-center"><a href="http://img.e-com-net.com/image/info8/be79a621399c46a5aec682ecfd64da28.png" target="_blank"><img alt="5 Vue＋html css 问题（西安10.9）_第3张图片" src="http://img.e-com-net.com/image/info8/be79a621399c46a5aec682ecfd64da28.png" width="643" height="694" style="border:1px solid black;"></a></p> <h4></h4> <p></p> <h2 id="Vue%203.0%20%E6%89%80%E9%87%87%E7%94%A8%E7%9A%84%20Composition%20Api%20%E4%B8%8E%20Vue%202.x%E4%BD%BF%E7%94%A8%E7%9A%84Options%20Api%20%E6%9C%89%E4%BB%80%E4%B9%88%E5%8C%BA%E5%88%AB%EF%BC%9F">Vue 3.0 所采用的 Composition Api 与 Vue 2.x使用的Options Api 有什么区别？</h2> <p></p> <p>Options Api</p> <blockquote> <p>包含一个描述组件选项（data、methods、props等）的对象 options；<br> API开发复杂组件，同一个功能逻辑的代码被拆分到不同选项；<br> 使用mixin重用公用代码，也有问题：命名冲突，数据来源不清晰；</p> </blockquote> <p></p> <p>Composition Api</p> <blockquote> <p>vue3 新增的一组 api，它是基于函数的 api，可以更灵活的组织组件的逻辑。<br> 解决options api在大型项目中，options api不好拆分和重用的问题。</p> <p></p> </blockquote> <h2 id="element-ui%E4%B8%AD%E9%81%87%E5%88%B0%E7%9A%84%E9%97%AE%E9%A2%98">element-ui中遇到的问题</h2> <p>1.el-cascader多选在IE中样式不正常</p> <p>2.级联选择器高度问题<br> 3.Table 固定列下出现线条</p> <p></p> <p></p> <h3>vue的自定义指令</h3> <p><br> 普通DOM元素进行底层操作的时候，可以使用自定义指令鼠标聚焦，下拉菜单，相对时间转换，滚动动画<br> 自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的。<br> 添加自定义指令的两种方式：<br> 全局指令：通过 Vue.directive() 函数注册一个全局的指令。<br> 局部指令：通过组件的 directives 属性，对该组件添加一个局部的指令。</p> <p>Vue 初始化页面闪动问题如何解决：<br> 出现该问题是因为在 Vue 代码尚未被解析之前，尚无法控制页面中 DOM 的显示，所以会看见模板字符串等代码。<br> 解决方案是，在 css 代码中添加 v-cloak 规则，同时在待编译的标签上添加 v-cloak 属性<br> Vue 组件间通信有哪几种方式</p> <h3><br> 写过自定义指令吗原理是什么：</h3> <p><br> 指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。<br> 自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind<br> 原理 <br> 当前元素添加 directives 属性，通过 genDirectives 生成指令代码，</p> <h3>diff 算法</h3> <p><br> 1snabbdom生成vnode：h函数通过vnode函数，最终返回一个对象 <br> 2 patch函数。先判断传入参数是vnode还是dom。（sameVnode）再判断vnode是否相同，比较key 和 selector 都相同再调用 patchVnode 进行后续比较，否则直接删除重建 patch 函数：相同（sel 和 key 都相同）删除 oldVnode / 重建 vnode <br> 3patchVnode函数 children： text children<br> 4 updateChildren函数 <br> (开始与开始做对比)对比，（sameVnode）结束与结束做对比) 开始与结束做对比 (结束与开始做对比) 四种情况都没有命中直接对题对比 key 新建节点</p> <h3>模板编译</h3> <p><br> vue模板=》render函数=》vnode=》进行patch和diff<br> 对于Vue来说，我们所认为的“HTML”其实都是字符串。<br> Vue会根据其规定的模板语法规则，将其解析成AST语法树；<br> 然后会对这个大对象进行一些初步处理，比如标记没有动态绑定值的节点；<br> 最后，会把这个大对象编译成render函数，并将它绑定在组件的实例上。<br> 这样，我们所认为的“HTML”就变成了JavaScript代码，可以基于JavaScript模块规则进行导入导出，在需要渲染组件的地方，就调用render函数，根据组件当前的状态生成虚拟dom，然后就可以根据这个虚拟dom去更新视图了。 </p> <h3><br> 对Vue组件化的理解</h3> <p><br> 1.组件是独立和可复用的代码组织单元。组件系统是Vue核心特性之一，它使开发者使用小型、独立和通常可复用的组件构建大型应用；<br> 2.组件化开发能大幅提高应用开发效率、测试性、复用性等；<br> 3.组件使用按分类有：页面组件、业务组件、通用组件；<br> 4.vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于VueComponent，扩展于Vue；<br> 5.vue中常见组件化技术有：属性prop，自定义事件，插槽等，它们主要用于组件通信、扩展等；6合理的划分组件，有助于提升应用性能；<br> 6.组件应该是高内聚、低耦合的；<br> 7.遵循单向数据流的原则。<br> </p> <p></p> <p></p> <p></p> <p></p> </div> </div> </div> </div> </div>  <div id="SOHUCS" sid="1723335456868872192"></div> <script type="text/javascript" src="/views/front/js/chanyan.js"></script>  <div class="youdao-fixed-ad" id="detail_ad_bottom"></div> </div> <div class="col-md-3"> <div class="row" id="ad">  <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_1"> </div> </div>  <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_2"></div> </div>  <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad"> <div class="youdao-fixed-ad" id="detail_ad_3"></div> </div> </div> </div> </div> </div> </div> <div class="container"> <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(前端,前端,javascript,vue.js)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件，它用于显示当前页面的路径，帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中，如果你已经安装了ElementUI，就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例：安装ElementUI（如果你还没有安装的话）:你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497792265613312.htm" title="【加密社】Solidity 中的事件机制及其应用" target="_blank">【加密社】Solidity 中的事件机制及其应用</a> <span class="text-muted">加密社</span> <a class="tag" taget="_blank" href="/search/%E9%97%B2%E4%BE%83/1.htm">闲侃</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E6%99%BA%E8%83%BD%E5%90%88%E7%BA%A6/1.htm">智能合约</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a> <div>加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动" target="_blank">HTML网页设计制作大作业（div+css）云南我的家乡旅游景点带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835448238103162880.htm" title="springboot+vue项目实战一-创建SpringBoot简单项目" target="_blank">springboot+vue项目实战一-创建SpringBoot简单项目</a> <span class="text-muted">苹果酱0567</span> <a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E9%A2%98%E6%B1%87%E6%80%BB%E4%B8%8E%E8%A7%A3%E6%9E%90/1.htm">面试题汇总与解析</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/boot/1.htm">boot</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E9%97%B4%E4%BB%B6/1.htm">中间件</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一</div> </li> <li><a href="/article/1835448239864770560.htm" title="JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）" target="_blank">JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy）</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数</div> </li> <li><a href="/article/1835437775344726016.htm" title="博客网站制作教程" target="_blank">博客网站制作教程</a> <span class="text-muted">2401_85194651</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a> <div>首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java</div> </li> <li><a href="/article/1835428948339683328.htm" title="JavaScript `Map` 和 `WeakMap`详细解释" target="_blank">JavaScript `Map` 和 `WeakMap`详细解释</a> <span class="text-muted">跳房子的前端</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%8E%9F%E7%94%9F%E6%96%B9%E6%B3%95/1.htm">原生方法</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键</div> </li> <li><a href="/article/1835428317084348416.htm" title="最简单将静态网页挂载到服务器上(不用nginx)" target="_blank">最简单将静态网页挂载到服务器上(不用nginx)</a> <span class="text-muted">全能全知者</span> <a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl</div> </li> <li><a href="/article/1835427057752961024.htm" title="补充元象二面" target="_blank">补充元象二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重</div> </li> <li><a href="/article/1835420753252675584.htm" title="微信小程序开发注意事项" target="_blank">微信小程序开发注意事项</a> <span class="text-muted">jun778895</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂</div> </li> <li><a href="/article/1835419870070665216.htm" title="切换淘宝最新npm镜像源是" target="_blank">切换淘宝最新npm镜像源是</a> <span class="text-muted">hai40587</span> <a class="tag" taget="_blank" href="/search/npm/1.htm">npm</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a> <div>切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库</div> </li> <li><a href="/article/1835411044768509952.htm" title="字节二面" target="_blank">字节二面</a> <span class="text-muted">Redstone Monstrosity</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文</div> </li> <li><a href="/article/1835398064727224320.htm" title="前端代码上传文件" target="_blank">前端代码上传文件</a> <span class="text-muted">余生逆风飞翔</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i</div> </li> <li><a href="/article/1835385458356482048.htm" title="uniapp实现动态标记效果详细步骤【前端开发】" target="_blank">uniapp实现动态标记效果详细步骤【前端开发】</a> <span class="text-muted">2401_85123349</span> <a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a> <div>第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。</div> </li> <li><a href="/article/1835383919906746368.htm" title="高性能javascript--算法和流程控制" target="_blank">高性能javascript--算法和流程控制</a> <span class="text-muted">海淀萌狗</span> <div>-for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i</div> </li> <li><a href="/article/1835373236217540608.htm" title="360前端星计划-动画可以这么玩" target="_blank">360前端星计划-动画可以这么玩</a> <span class="text-muted">马小蜗</span> <div>动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能</div> </li> <li><a href="/article/1835368019430305792.htm" title="Vue + Express实现一个表单提交" target="_blank">Vue + Express实现一个表单提交</a> <span class="text-muted">九旬大爷的梦</span> <div>最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo</div> </li> <li><a href="/article/1835360244646113280.htm" title="JavaScript中秋快乐！" target="_blank">JavaScript中秋快乐！</a> <span class="text-muted">Q_w7742</span> <a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh</div> </li> <li><a href="/article/1835359727924637696.htm" title="Nginx从入门到实践(三)" target="_blank">Nginx从入门到实践(三)</a> <span class="text-muted">听你讲故事啊</span> <div>动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin</div> </li> <li><a href="/article/1835354700392787968.htm" title="Nginx的使用场景：构建高效、可扩展的Web架构" target="_blank">Nginx的使用场景：构建高效、可扩展的Web架构</a> <span class="text-muted">张某布响丸辣</span> <a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a> <div>Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin</div> </li> <li><a href="/article/1835354447627251712.htm" title="前端知识点" target="_blank">前端知识点</a> <span class="text-muted">ZhangTao_zata</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage</div> </li> <li><a href="/article/1835352325032603648.htm" title="第三十一节:Vue路由:前端路由vs后端路由的了解" target="_blank">第三十一节:Vue路由:前端路由vs后端路由的了解</a> <span class="text-muted">曹老师</span> <div>1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访</div> </li> <li><a href="/article/1835350917352878080.htm" title="华雁智科前端面试题" target="_blank">华雁智科前端面试题</a> <span class="text-muted">因为奋斗超太帅啦</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AF%95%E9%9D%A2%E8%AF%95%E9%97%AE%E9%A2%98%E6%95%B4%E7%90%86/1.htm">前端笔试面试问题整理</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l</div> </li> <li><a href="/article/1835350535818014720.htm" title="如何建设数据中台（五）——数据汇集—打破企业数据孤岛" target="_blank">如何建设数据中台（五）——数据汇集—打破企业数据孤岛</a> <span class="text-muted">weixin_47088026</span> <a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95%E5%92%8C%E6%80%BB%E7%BB%93/1.htm">学习记录和总结</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E5%8F%B0/1.htm">中台</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E4%B8%AD%E5%8F%B0/1.htm">数据中台</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E4%BA%BA%E7%94%9F/1.htm">程序人生</a><a class="tag" taget="_blank" href="/search/%E7%BB%8F%E9%AA%8C%E5%88%86%E4%BA%AB/1.htm">经验分享</a> <div>数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi</div> </li> <li><a href="/article/1835343473629294592.htm" title="分布式锁和spring事务管理" target="_blank">分布式锁和spring事务管理</a> <span class="text-muted">暴躁的鱼</span> <a class="tag" taget="_blank" href="/search/%E9%94%81%E5%8F%8A%E4%BA%8B%E5%8A%A1/1.htm">锁及事务</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据</div> </li> <li><a href="/article/1835340577596600320.htm" title="前端CSS面试常见题" target="_blank">前端CSS面试常见题</a> <span class="text-muted">剑亦未配妥</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/1.htm">前端面试</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a> <div>边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子</div> </li> <li><a href="/article/88.htm" title="ztree设置禁用节点" target="_blank">ztree设置禁用节点</a> <span class="text-muted">3213213333332132</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/ztree/1.htm">ztree</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/setDisabledNode/1.htm">setDisabledNode</a><a class="tag" taget="_blank" href="/search/Ajax/1.htm">Ajax</a> <div>ztree设置禁用节点的时候注意，当使用ajax后台请求数据,必须要设置为同步获取数据，否者会获取不到节点对象，导致设置禁用没有效果。 $(function(){ showTree(); setDisabledNode(); }); </div> </li> <li><a href="/article/215.htm" title="JVM patch by Taobao" target="_blank">JVM patch by Taobao</a> <span class="text-muted">bookjovi</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/HotSpot/1.htm">HotSpot</a> <div>在网上无意中看到淘宝提交的hotspot patch，共四个，有意思，记录一下。 7050685：jsdbproc64.sh has a typo in the package name 7058036：FieldsAllocationStyle=2 does not work in 32-bit VM 7060619：C1 should respect inline and</div> </li> <li><a href="/article/342.htm" title="将session存储到数据库中" target="_blank">将session存储到数据库中</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/session/1.htm">session</a> <div>CREATE TABLE sessions ( id CHAR(32) NOT NULL, data TEXT, last_accessed TIMESTAMP NOT NULL, PRIMARY KEY (id) ); <?php /** * Created by PhpStorm. * User: michaeldu * Date</div> </li> <li><a href="/article/469.htm" title="Vector" target="_blank">Vector</a> <span class="text-muted">171815164</span> <a class="tag" taget="_blank" href="/search/vector/1.htm">vector</a> <div>public Vector<CartProduct> delCart(Vector<CartProduct> cart, String id) { for (int i = 0; i < cart.size(); i++) { if (cart.get(i).getId().equals(id)) { cart.remove(i); </div> </li> <li><a href="/article/596.htm" title="各连接池配置参数比较" target="_blank">各连接池配置参数比较</a> <span class="text-muted">g21121</span> <a class="tag" taget="_blank" href="/search/%E8%BF%9E%E6%8E%A5%E6%B1%A0/1.htm">连接池</a> <div> 排版真心费劲，大家凑合看下吧，见谅~ Druid DBCP C3P0 Proxool 数据库用户名称 Username Username User 数据库密码 Password Password Password 驱动名</div> </li> <li><a href="/article/723.htm" title="[简单]mybatis insert语句添加动态字段" target="_blank">[简单]mybatis insert语句添加动态字段</a> <span class="text-muted">53873039oycg</span> <a class="tag" taget="_blank" href="/search/mybatis/1.htm">mybatis</a> <div> mysql数据库,id自增,配置如下： <insert id="saveTestTb" useGeneratedKeys="true" keyProperty="id" parameterType=&</div> </li> <li><a href="/article/850.htm" title="struts2拦截器配置" target="_blank">struts2拦截器配置</a> <span class="text-muted">云端月影</span> <a class="tag" taget="_blank" href="/search/struts2%E6%8B%A6%E6%88%AA%E5%99%A8/1.htm">struts2拦截器</a> <div>struts2拦截器interceptor的三种配置方法方法1. 普通配置法 <struts> <package name="struts2" extends="struts-default"> &</div> </li> <li><a href="/article/977.htm" title="IE中页面不居中，火狐谷歌等正常" target="_blank">IE中页面不居中，火狐谷歌等正常</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/IE%E4%B8%AD%E9%A1%B5%E9%9D%A2%E4%B8%8D%E5%B1%85%E4%B8%AD/1.htm">IE中页面不居中</a> <div>问题是首页在火狐、谷歌、所有IE中正常显示，列表页的页面在火狐谷歌中正常，在IE6、7、8中都不中，觉得可能那个地方设置的让IE系列都不认识，仔细查看后发现，列表页中没写HTML模板部分没有添加DTD定义，就是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3</div> </li> <li><a href="/article/1104.htm" title="String,int,Integer,char 几个类型常见转换" target="_blank">String,int,Integer,char 几个类型常见转换</a> <span class="text-muted">antonyup_2006</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>如何将字串 String 转换成整数 int? int i = Integer.valueOf(my_str).intValue(); int i=Integer.parseInt(str); 如何将字串 String 转换成Integer ? Integer integer=Integer.valueOf(str); 如何将整数 int 转换成字串 String ? 1.</div> </li> <li><a href="/article/1231.htm" title="PL/SQL的游标类型" target="_blank">PL/SQL的游标类型</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/%E6%98%BE%E7%A4%BA%E6%B8%B8%E6%A0%87%28%E9%9D%99%E6%80%81%E6%B8%B8%E6%A0%87%29/1.htm">显示游标(静态游标)</a><a class="tag" taget="_blank" href="/search/%E9%9A%90%E5%BC%8F%E6%B8%B8%E6%A0%87/1.htm">隐式游标</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%A0%87%E7%9A%84%E6%9B%B4%E6%96%B0%E5%92%8C%E5%88%A0%E9%99%A4/1.htm">游标的更新和删除</a><a class="tag" taget="_blank" href="/search/%25rowtype/1.htm">%rowtype</a><a class="tag" taget="_blank" href="/search/ref%E6%B8%B8%E6%A0%87%28%E5%8A%A8%E6%80%81%E6%B8%B8%E6%A0%87%29/1.htm">ref游标(动态游标)</a> <div>游标是oracle中的一个结果集,用于存放查询的结果; PL/SQL中游标的声明; 1,声明游标 2,打开游标(默认是关闭的); 3,提取数据 4,关闭游标注意的要点:游标必须声明在declare中,使用open打开游标,fetch取游标中的数据,close关闭游标隐式游标:主要是对DML数据的操作隐</div> </li> <li><a href="/article/1358.htm" title="JUnit4中@AfterClass @BeforeClass @after @before的区别对比" target="_blank">JUnit4中@AfterClass @BeforeClass @after @before的区别对比</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/JUnit4/1.htm">JUnit4</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a> <div>一.基础知识 JUnit4使用Java5中的注解（annotation），以下是JUnit4常用的几个annotation： @Before：初始化方法对于每一个测试方法都要执行一次（注意与BeforeClass区别，后者是对于所有方法执行一次）@After：释放资源对于每一个测试方法都要执行一次（注意与AfterClass区别，后者是对于所有方法执行一次</div> </li> <li><a href="/article/1485.htm" title="精通Oracle10编程SQL(12)开发包" target="_blank">精通Oracle10编程SQL(12)开发包</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/plsql/1.htm">plsql</a> <div>/* *开发包 *包用于逻辑组合相关的PL/SQL类型（例如TABLE类型和RECORD类型）、PL/SQL项（例如游标和游标变量）和PL/SQL子程序（例如过程和函数） */ --包用于逻辑组合相关的PL/SQL类型、项和子程序，它由包规范和包体两部分组成 --建立包规范：包规范实际是包与应用程序之间的接口，它用于定义包的公用组件，包括常量、变量、游标、过程和函数等 --在包规</div> </li> <li><a href="/article/1612.htm" title="【EhCache二】ehcache.xml配置详解" target="_blank">【EhCache二】ehcache.xml配置详解</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/ehcache.xml/1.htm">ehcache.xml</a> <div>在ehcache官网上找了多次，终于找到ehcache.xml配置元素和属性的含义说明文档了，这个文档包含在ehcache.xml的注释中！ ehcache.xml ： http://ehcache.org/ehcache.xml ehcache.xsd ： http://ehcache.org/ehcache.xsd ehcache配置文件的根元素是ehcahe ehcac</div> </li> <li><a href="/article/1739.htm" title="java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL" target="_blank">java.lang.ClassNotFoundException: org.springframework.web.context.ContextLoaderL</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a> <div>今天学习spring+cxf的时候遇到一个问题：在web.xml中配置了spring的上下文监听器： <listener> <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class> </listener> 随后启动</div> </li> <li><a href="/article/1866.htm" title="angular.element" target="_blank">angular.element</a> <span class="text-muted">boyitech</span> <a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a><a class="tag" taget="_blank" href="/search/AngularJS+API/1.htm">AngularJS API</a><a class="tag" taget="_blank" href="/search/angular.element/1.htm">angular.element</a> <div>angular.element 描述: 包裹着一部分DOM element或者是HTML字符串，把它作为一个jQuery元素来处理。（类似于jQuery的选择器啦）如果jQuery被引入了，则angular.element就可以看作是jQuery选择器，选择的对象可以使用jQuery的函数；如果jQuery不可用，angular.e</div> </li> <li><a href="/article/1993.htm" title="java-给定两个已排序序列，找出共同的元素。" target="_blank">java-给定两个已排序序列，找出共同的元素。</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div> import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class CommonItemInTwoSortedArray { /** * 题目：给定两个已排序序列，找出共同的元素。 * 1.定义两个指针分别指向序列的开始。 * 如果指向的两个元素</div> </li> <li><a href="/article/2120.htm" title="sftp 异常，有遇到的吗？求解" target="_blank">sftp 异常，有遇到的吗？求解</a> <span class="text-muted">Chen.H</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jcraft/1.htm">jcraft</a><a class="tag" taget="_blank" href="/search/auth/1.htm">auth</a><a class="tag" taget="_blank" href="/search/jsch/1.htm">jsch</a><a class="tag" taget="_blank" href="/search/jschexception/1.htm">jschexception</a> <div>com.jcraft.jsch.JSchException: Auth cancel at com.jcraft.jsch.Session.connect(Session.java:460) at com.jcraft.jsch.Session.connect(Session.java:154) at cn.vivame.util.ftp.SftpServerAccess.connec</div> </li> <li><a href="/article/2247.htm" title="[生物智能与人工智能]神经元中的电化学结构代表什么?" target="_blank">[生物智能与人工智能]神经元中的电化学结构代表什么?</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div> 我这里做一个大胆的猜想,生物神经网络中的神经元中包含着一些化学和类似电路的结构,这些结构通常用来扮演类似我们在拓扑分析系统中的节点嵌入方程一样,使得我们的神经网络产生智能判断的能力,而这些嵌入到节点中的方程同时也扮演着"经验"的角色.... 我们可以尝试一下...在某些神经</div> </li> <li><a href="/article/2374.htm" title="通过LAC和CID获取经纬度信息" target="_blank">通过LAC和CID获取经纬度信息</a> <span class="text-muted">dai_lm</span> <a class="tag" taget="_blank" href="/search/lac/1.htm">lac</a><a class="tag" taget="_blank" href="/search/cid/1.htm">cid</a> <div>方法1：用浏览器打开http://www.minigps.net/cellsearch.html，然后输入lac和cid信息(mcc和mnc可以填0)，如果数据正确就可以获得相应的经纬度方法2：发送HTTP请求到http://www.open-electronics.org/celltrack/cell.php?hex=0&lac=<lac>&cid=&</div> </li> <li><a href="/article/2501.htm" title="JAVA的困难分析" target="_blank">JAVA的困难分析</a> <span class="text-muted">datamachine</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>前段时间转了一篇SQL的文章（http://datamachine.iteye.com/blog/1971896），文章不复杂，但思想深刻，就顺便思考了一下java的不足，当砖头丢出来，希望引点和田玉。 -----------------------------------------------------------------------------------------</div> </li> <li><a href="/article/2628.htm" title="小学5年级英语单词背诵第二课" target="_blank">小学5年级英语单词背诵第二课</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/english/1.htm">english</a><a class="tag" taget="_blank" href="/search/word/1.htm">word</a> <div>money 钱 paper 纸 speak 讲，说 tell 告诉 remember 记得，想起 knock 敲，击，打 question 问题 number 数字，号码 learn 学会，学习 street 街道 carry 搬运，携带 send 发送，邮寄，发射 must 必须 light 灯，光线，轻的 front </div> </li> <li><a href="/article/2755.htm" title="linux下面没有tree命令" target="_blank">linux下面没有tree命令</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a> <div>centos p安装 yum -y install tree mac os安装 brew install tree 首先来看tree的用法 tree 中文解释：tree 功能说明：以树状图列出目录的内容。语　　法：tree [-aACdDfFgilnNpqstux][-I <范本样式>][-P <范本样式</div> </li> <li><a href="/article/2882.htm" title="Map迭代方式，Map迭代，Map循环" target="_blank">Map迭代方式，Map迭代，Map循环</a> <span class="text-muted">蕃薯耀</span> <a class="tag" taget="_blank" href="/search/Map%E5%BE%AA%E7%8E%AF/1.htm">Map循环</a><a class="tag" taget="_blank" href="/search/Map%E8%BF%AD%E4%BB%A3/1.htm">Map迭代</a><a class="tag" taget="_blank" href="/search/Map%E8%BF%AD%E4%BB%A3%E6%96%B9%E5%BC%8F/1.htm">Map迭代方式</a> <div>Map迭代方式，Map迭代，Map循环 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年</div> </li> <li><a href="/article/3009.htm" title="Spring Cache注解+Redis" target="_blank">Spring Cache注解+Redis</a> <span class="text-muted">hanqunfeng</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>Spring3.1 Cache注解依赖jar包：  <dependency> <groupId>org.springframework.data</groupId> <artifactId>spring-data-redis</artifactId> </div> </li> <li><a href="/article/3136.htm" title="Guava中针对集合的 filter和过滤功能" target="_blank">Guava中针对集合的 filter和过滤功能</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/filter/1.htm">filter</a> <div>在guava库中，自带了过滤器(filter)的功能，可以用来对collection 进行过滤，先看例子： @Test public void whenFilterWithIterables_thenFiltered() { List<String> names = Lists.newArrayList("John"</div> </li> <li><a href="/article/3263.htm" title="学习编程那点事" target="_blank">学习编程那点事</a> <span class="text-muted">lampcy</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a> <div>一年前的夏天，我还在纠结要不要改行，要不要去学php？能学到真本事吗？改行能成功吗？太多的问题，我终于不顾一切，下定决心，辞去了工作，来到传说中的帝都。老师给的乘车方式还算有效，很顺利的就到了学校，赶巧了，正好学校搬到了新校区。先安顿了下来，过了个轻松的周末，第一次到帝都，逛逛吧！接下来的周一，是我噩梦的开始，学习内容对我这个零基础的人来说，除了勉强完成老师布置的作业外，我已经没有时间和精力去</div> </li> <li><a href="/article/3390.htm" title="架构师之流处理---------bytebuffer的mark,limit和flip" target="_blank">架构师之流处理---------bytebuffer的mark,limit和flip</a> <span class="text-muted">nannan408</span> <a class="tag" taget="_blank" href="/search/ByteBuffer/1.htm">ByteBuffer</a> <div>1.前言。如题，limit其实就是可以读取的字节长度的意思，flip是清空的意思，mark是标记的意思。 2.例子. 例子代码: String str = "helloWorld"; ByteBuffer buff = ByteBuffer.wrap(str.getBytes()); Sy</div> </li> <li><a href="/article/3517.htm" title="org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1" target="_blank">org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, column 1</a> <span class="text-muted">Everyday都不同</span> <a class="tag" taget="_blank" href="/search/%24/1.htm">$</a><a class="tag" taget="_blank" href="/search/%E8%BD%AC%E4%B9%89/1.htm">转义</a><a class="tag" taget="_blank" href="/search/el%E8%A1%A8%E8%BE%BE%E5%BC%8F/1.htm">el表达式</a> <div>最近在做Highcharts的过程中，在写js时，出现了以下异常：严重: Servlet.service() for servlet jsp threw exception org.apache.el.parser.ParseException: Encountered " ":" ": "" at line 1, </div> </li> <li><a href="/article/3644.htm" title="用Java实现发送邮件到163" target="_blank">用Java实现发送邮件到163</a> <span class="text-muted">tntxia</span> <a class="tag" taget="_blank" href="/search/java%E5%AE%9E%E7%8E%B0/1.htm">java实现</a> <div>/* 在java版经常看到有人问如何用javamail发送邮件？如何接收邮件？如何访问多个文件夹等。问题零散，而历史的回复早已经淹没在问题的海洋之中。本人之前所做过一个java项目，其中包含有WebMail功能，当初为用java实现而对javamail摸索了一段时间，总算有点收获。看到论坛中的经常有此方面的问题，因此把我的一些经验帖出来，希望对大家有些帮助。此篇仅介绍用</div> </li> <li><a href="/article/3771.htm" title="探索实体类存在的真正意义" target="_blank">探索实体类存在的真正意义</a> <span class="text-muted">java小叶檀</span> <a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a> <div>一. 实体类简述实体类其实就是俗称的POJO,这种类一般不实现特殊框架下的接口，在程序中仅作为数据容器用来持久化存储数据用的 POJO（Plain Old Java Objects）简单的Java对象它的一般格式就是 public class A{ private String id; public Str</div> </li> </ul> </div> </div> </div> <div> <div class="container"> <div class="indexes"> <strong>按字母分类：</strong> <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a> </div> </div> </div> <footer id="footer" class="mb30 mt30"> <div class="container"> <div class="footBglm"> <a target="_blank" href="/">首页</a> - <a target="_blank" href="/custom/about.htm">关于我们</a> - <a target="_blank" href="/search/Java/1.htm">站内搜索</a> - <a target="_blank" href="/sitemap.txt">Sitemap</a> - <a target="_blank" href="/custom/delete.htm">侵权投诉</a> </div> <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.  </div> </div> </footer>  <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script> <script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script> <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/> <script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script> </body> </html>

5 Vue＋html css 问题（西安10.9）

1 问了Vue 和react 的区别 没回答 不会 react

1.computed和wacth的区别

2.使用过哪种路由模式 hash和history的区别

2.2、hash模式

2.3、history 模式

3.style标签的scoped属性的原理

scoped 穿透（深度作用选择器）

4.常用的vue指令 说了大概十个左右

1 v-once

2 v-show

3 v-if、v-else、v-else-if

4 v-for

5 v-text和v-html

6 v-bind

7 v-on

8 v-model

1 问了Vue 和react 的区别没回答不会 react

4.常用的vue指令说了大概十个左右