前端框架个人总结（java web前端（总结）前端要求和流行几个框架）

本文目录

• java web前端（总结）前端要求和流行几个框架
• 前端框架vue中的keep-alive总结实践
• web前端几大框架各自的真正精髓在于什么

java web前端（总结）前端要求和流行几个框架

1. 掌握各种修图软件，如PSFireworksAI，不要求专业设计师水平，但要会用会改，今天是一专多能的时代，光会编程讨不好饭碗的；2. 精通JavaScript、jQuery、vue、 react、angular等页面效果框架，这是前端工程师的最核心技能，是专做页面效果的技术。其实精通了JavaScript，后端编程语言，如.NET、PHP、Ruby都很容易掌握，因为其原理是一样的；3. 精通一二种模板语言，并能修改，如织梦或wordpress的模板；4. 掌握thinkphp与zend框架，能修改此类开源源码；5. 掌握html5与sencha，这是做手机等移动设备的页面前端技术；6. 掌握一二种后端编程语言，如PHP、.NET、JAVA，能读懂后端源码，实际上其原理跟JS差不多；7. 掌握node.js，熟悉各种自动化部署工具；8. 前端是重视用户体验的，不是靠美工给的页面 做出来就行了，那样不是一个合格的前端。

前端框架vue中的keep-alive总结实践

《keep-alive》是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

prop:

在2.1.0版本Vue中

常见用法：

// 组件export default {

name: ’test-keep-alive’,

data () {

return {

includedComponents: "test-keep-alive"

}

}

}

《keep-alive include="test-keep-alive"》

《!-- 将缓存name为test-keep-alive的组件 --》

《component》《/component》《/keep-alive》

《keep-alive include="a,b"》

《!-- 将缓存name为a或者b的组件，结合动态组件使用 --》

《component :is="view"》《/component》《/keep-alive》

《!-- 使用正则表达式，需使用v-bind --》《keep-alive :include="/a|b/"》

《component :is="view"》《/component》《/keep-alive》

《!-- 动态判断 --》《keep-alive :include="includedComponents"》

《router-view》《/router-view》《/keep-alive》

《keep-alive exclude="test-keep-alive"》

《!-- 将不缓存name为test-keep-alive的组件 --》

《component》《/component》《/keep-alive》

结合router，缓存部分页面

使用$route.meta的keepAlive属性：

《keep-alive》

《router-view v-if="$route.meta.keepAlive"》《/router-view》《/keep-alive》《router-view v-if="!$route.meta.keepAlive"》《/router-view》

需要在router中设置router的元信息meta：

//...router.jsexport default new Router({

routes: [

{

path: ’/’,

name: ’Hello’,

component: Hello,

meta: {

keepAlive: false // 不需要缓存

}

},

{

path: ’/page1’,

name: ’Page1’,

component: Page1,

meta: {

keepAlive: true // 需要被缓存

}

}

]

})

使用效果

以上面router的代码为例：

《!-- Page1页面 --》《template》

《p class="hello"》

《h1》Vue《/h1》

《h3》{{msg}}《/h3》

《input placeholder="输入框"》《/input》

《/p》《/template》

《!-- Hello页面 --》《template》

《p class="hello"》

《h1》{{msg}}《/h1》

《/p》《/template》

(1) 在Page1页面输入框输入“asd”，然后手动跳转到Hello页面；

(2) 回到Page1页面发现之前输入的"asd"依然保留，说明页面信息成功保存在内存中；

图1 进入Page1页面，并输入"asd"

图2 跳转到Hello

图3 返回Page1页面，输入框数据会被保留

当然，也可以通过动态设置route.meta的keepAlive属性来实现其他需求，

借鉴一下 vue-router 之 keep-alive，作者：RoamIn这篇博客中的例子：

思路是在每个路由的beforeRouteLeave(to, from, next)钩子中设置to.meta.keepAlive：

A的路由：

{

path: ’/’,

name: ’A’,

component: A,

meta: {

keepAlive: true // 需要被缓存

}

}

export default {

data() {

return {};

},

methods: {},

beforeRouteLeave(to, from, next) {

// 设置下一个路由的 meta

to.meta.keepAlive = true; // B 跳转到 A 时，让 A 缓存，即不刷新

next();

}

};

export default {

data() {

return {};

},

methods: {},

beforeRouteLeave(to, from, next) {

// 设置下一个路由的 meta

to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新

next();

}

};

亲测有效哦~

keep-alive生命周期钩子函数：activated、deactivated

使用《keep-alive》会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。

web前端几大框架各自的真正精髓在于什么

vue

简单，轻量，专注视图的双向绑定框架

angular

模板强大，完善的mvvm框架，通过依赖注入，代码复用度高的重量级框架

react

模块化开发，速度快，单向数据流ui框架