钩子函数

转载自：https://www.cnblogs.com/aimeeblogs/p/9501490.html 如有侵权 联系删除 Vue.js面试题整理 一、什么是 MVVM ？ MVVM是 Model-View-ViewModel的缩写。 MVVM是一种设计思想。 Model 层代表数据模型，也可以在 Model中定义数据修改和操作的业务逻辑； View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来， ViewModel 是一个同步 View 和 Model的对象（桥梁）。 在 MVVM架构下， View 和 Model 之间并没有直接的联系，而是通过 ViewModel进行交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model中，而 Model 数据的变化也会立即反应到 View 上。 ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 二、 mvvm 和 mvc 区别？它和其它框架（ jquery ）的区别是什么？哪些场景适合？ mvc和 mvvm其实区别并不大

到目前为止我们只学习了一种方法来更新UI。调用 ReactDOM.render( ) 方法来改变输出。 在前面博客中有一个时钟的例子代码： function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTimeString()}.</h2> </div> ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); 将时钟封装为Clock组件 function Clock(props) { return ( <div> <h1>Hello, world!</h1> <h2>It is {props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { ReactDOM.render( <Clock date={new Date()} />, document.getElementById('root') ); } setInterval(tick, 1000); 1. 将函数转换为类 可以通过5个步骤将 函数组件 转换为 类组件 创建一个名称扩展为 React

SSDT 中文名称为系统服务描述符表，该表的作用是将Ring3应用层与Ring0内核层，两者的API函数连接起来，起到承上启下的作用，SSDT并不仅仅只包含一个庞大的地址索引表，它还包含着一些其它有用的信息，诸如地址索引的基址、服务函数个数等，SSDT 通过修改此表的函数地址可以对常用 Windows 函数进行内核级的Hook，从而实现对一些核心的系统动作进行过滤、监控的目的，接下来将演示如何通过编写简单的驱动程序，来实现搜索 SSDT 函数的地址，并能够实现简单的内核 Hook 挂钩。 在开始编写驱动之前，我们先来分析一下Ring3到Ring0是如何协作的，这里通过C语言调用 OpenProcess 函数，并分析它的执行过程，先来创建一个C程序。 #include <windows.h> int main(int argc, char* argv[]) { HANDLE handle = OpenProcess(PROCESS_ALL_ACCESS,FALSE,2548); return 0; } 通过VC6编译器编译，并使用OD载入程序，找到程序的OEP，分析第一次调用，可以看到CALL的地址是 <&KERNEL32.OpenProcess> 此处我们直接跟进去。 0040102A |. 68 F4090000 push 0x9F4 ; /ProcessId = 0x9F4

前言 本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下 Vue 掌握的程度。 本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读，当然大佬级别的请随意。 希望读者读完本文，有一定的启发思考，也能对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，对 Vue 有更好的掌握。文章最后一题，欢迎同学们积极回答，分享各自的经验 ~~~ 1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？ SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。 优点： 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染； 基于上面一点，SPA 相对对服务器压力小； 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理； 缺点： 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载； 前进后退路由管理：由于单页应用在一个页面中显示所有的内容

　　一段时间没用React，重新温习了一遍官网新特性hooks的内容，干脆自己写个简单的，方便记忆一些官网列出的注意事项。 const makeUseState = () => { const newOne = stateAmount => ({ index: 0, whole: stateAmount, data: [], getData(initData) { let i = this.index; this.index = (i + 1) % this.whole; return [this.data[i] ? this.data[i] : (this.data[i] = initData), this.setData(i)]; }, setData(index) { return (newData, reRender) => { this.data[index] = newData; reRender(); }; } }); const rootState = {}; return (data, CpName, seq, stateAmount) => { if (rootState[CpName] === undefined) { rootState[CpName] = []; } let store = rootState[CpName]; if (!store[seq

序列化组件 Serializer(偏底层，了解) ModelSerializer（重点） ListModelSerializer（辅助群改） 1.Serializer的运用 序列化器的使用 序列化器的使用分两个阶段： 　　1.在客户端请求时：使用序列化器可以完成对数据的反序列化（就是前段往后端传递数据，反序列化之后保存数据） 　　2.在服务器响应时，使用序列化器可以完成对数据的序列化（服务器取出数据，序列化之后往前段发送展示） 序列化使用流程： 基本使用： 　　1.先查询出一个用户对象 from models import user user = User.object.get(id=2) 　　2.构造序列化器对象 from user.serializers import UserSerializer user_ser = Userserializer(user) #放入查询出的user对象 　　3.获取序列化对象 通过data属性可以获取序列化后的数据 上面查出来的user_ser是一个serializer对象，需要取出具体的数据传给前端，所有要用到 user_ser.data取出具体数据 　　4.如果要被序列化的数据是包含多条数据的（也可以说被[ ]嵌套的，不管是多条还是单条）,需要添加many=True参数 user = models.User.objects.all()

Vue生命周期 每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期，在这个过程中会有一些钩子函数会得到回调 Vue中能够被网页直接使用的最小单位就是组件，我们经常写的： var vm = new Vue({ el: '#app', ...... } 是根组件，el指定了它的模板（id为app的元素包裹的部分），相对于template属性 也可以这样写： var vm = new Vue({ ...... } vm.$mount("#app"); 根组件里面可以使用子组件： var vm = new Vue({ ...... components: { 'my-components': child } } vm.$mount("#app"); 这样就可以在id为app的div中使用名字my-components来引用child组件 div id="app"> ...... <my-components :msg="msg1" v-if="show"></my-components> ...... </div> beforeCreate:在实例初始化之后，这时候el 和 data 并未初始化 created：实完成了 data 数据的初始化，但Vue 实例使用的根 DOM 元素el还未初始化 beforeMount：data和el均已经初始化

　　所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你 不能使用箭头函数 来定义一个生命周期方法。 beforeCreate 　　在实例初始化之后，此时还不能访问到data。 created 　　 created钩子函数中已经可以访问data，ajax请求最好放到这个钩子函数中，请求返回的数据可以直接放在data中。 beforeMount 　　 在挂载开始之前被调用：相关的 render 函数首次被调用。 　　 该钩子在服务器端渲染期间不被调用。 mounted 　　 可以访问到dom，对dom进行操作 beforeUpdate 　　 数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加 的事件监听器。 　　 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。 updated 　　 数据更改导致的虚拟 DOM 重新渲染，在这之后会调用该钩子。 　　 注意： updated 不会 承诺所有的子组件也都一起被重绘。如果希望等到整个视图都重绘完毕，可以用 vm.$nextTick替换掉updated 　　 该钩子在服务器端渲染期间不被调用。 beforeDestory 　　 实例销毁之前调用。在这一步，实例仍然完全可用。 　　 该钩子在服务器端渲染期间不被调用。

示例图 home代码 <template> <!-- 所有的内容要被根节点包含起来 --> <div id="life"> 生命周期函数的演示 ---{{msg}} <br> <button @click="setMsg()">执行方法改变msg</button> </div> </template> <script> /* 生命周期函数/生命周期钩子： 组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数 */ export default { data() { return { msg: "msg" }; }, methods: { setMsg() { this.msg = "我是改变后的数据"; } }, beforeCreate() { console.log("实例刚刚被创建1"); }, created() { console.log("实例已经创建完成2"); }, beforeMount() { console.log("模板编译之前3"); }, mounted() { /*请求数据，操作dom , 放在这个里面 mounted*/ console.log("模板编译完成4"); }, beforeUpdate() { console.log("数据更新之前"); }, updated() { console.log(

Vue一共有10个生命周期函数，我们可以利用这些函数在vue的每个阶段都进行操作数据或者改变内容。 其实在Vue的官网有一张图已经很好的诠释了生命周期，我在这里就不再多讲了，直接贴图，然后上程序代码。 html <div id="app"> {{message}} <p><button @click="jia">加分</button></p> </div> //外部销毁 <button onclick="app.$destroy()">销毁</button> js var app=new Vue({ el:'#app', data:{ message:1 }, methods:{ jia:function(){ this.message ++; } }, beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, created:function(){ console.log('2-created 创建完成'); }, beforeMount:function(){ console.log('3-beforeMount 挂载之前'); }, mounted:function(){ console.log('4-mounted 被创建'); }, beforeUpdate:function(){ console