1,vue使用的是什么模式?请具体介绍一下这种模式
答:渐进式开发,采用mvvm的模式
model (模型层) axios data vuex(state)
view (视图层) template < template>< /template>
viewmodel(传递者)是双向绑定实现的机制
延伸问题:什么是渐进式?Vue渐进式-先使用Vue的核心库,再根据你的需要的功能再去逐渐增加加相应的插件。(没有多做职责之外的事。)
2,数据渲染 有几种方式 有什么区别?**
答:{{}} == 等价于v-text
v-html:只有v-html可以渲染HTML代码
v-text
3,v-if和v-show有什么区别,切换时组件触发那些生命周期钩子函数?
v-if控制的是dom的销毁和创建 v-show只是控制dom的css中 display属性 触发的生命周期 v-if 显示:创建 挂载 隐藏:销毁 v-show显示隐藏不触发生命周期钩子函数
4,v-if和v-for为什么不建议混合使用
被渲染的dom会重复一个创建销毁的过程v-for的优先级比v-if高, 哪怕我们只渲染出一小部分用户的元素,也得在每次重渲染的时候遍历整个列表会影响性能,所以,我们可以把他们改为计算属性: computed:{ activeClass:function(){ this.users.filter(function(user)){ return user.isActive } } }
5,vue中如何自定义指令(全局和局部)
全局的:参数一:指令调用的dom对象,参数二:指令对象,获取相应的传值信息 Vue.directive('color',function(ele,obj){ if(obj.value%2==0){ ele.style.backgroundColor='red'; }else{ ele.style.backgroundColor='blue'; } }) 局部的: directive:{ color:function(ele,obj){ ele.style.backgroundColor='red'; } } 问题延伸:自定义指令的钩子函数 bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。 unbind:只调用一次,指令与元素解绑时调用。 <div id="app"> <p v-color="msg">{{msg}}</p> <p> <input type="text" v-model = "msg" name=""> </p> <button @click='gai'>改值</button> </div> <script type="text/javascript"> let vm = new Vue({ el : '#app', data : { msg : "hello" }, methods: { gai(){ this.msg='gaia' console.log(99) } }, directives:{ color:{ bind: function (ele) { console.log('sfref') ele.style.backgroundColor='red'; }, inserted: function (el) { console.log('insetr') }, update: function (el) { console.log('update') console.log(el.innerHTML) }, unbind: function (el) { console.log('unbind,销毁') } } }, }); </script>
6,vue中常用的指令有哪些
V-text:主要用来更新textContent,可以等同于JS的text属性 V-html:双大括号的方式会将数据解释为纯文本,而非HTML。为了输出真正的HTML,可以用v-html指令。它等同于JS的innerHtml属性。 V-show:也是用于根据条件展示元素。和v-if不同的是,如果v-if的值是false,则这个元素被销毁,不在dom中。但是v-show的元素会始终被渲染并保存在dom中,它只是简单的切换css的dispaly属性。 V-if:可以实现条件渲染,Vue会根据表达式的值的真假条件来渲染元素。 V-else-if:充当v-if的else-if块,可以链式的使用多次。可以更加方便的实现switch语句。 V-else:是搭配v-if使用的,它必须紧跟在v-if或者v-else-if后面,否则不起作用。 V-on:主要用来监听dom事件,以便执行一些代码块。表达式可以是一个方法名。@ V-bind:用来动态的绑定一个或者多个特性。没有参数时,可以绑定到一个包含键值对的对象。常用于动态绑定class和style。以及href等。 v-for:用v-for指令根据遍历数组来进行渲染 V-model:这个指令用于在表单上创建双向数据绑定 V-slot 插槽 V-pre:主要用来跳过这个元素和它的子元素编译过程。可以用来显示原始的Mustache标签。跳过大量没有指令的节点加快编译。 V-cloak:这个指令是用来保持在元素上直到关联实例结束时进行编译。 V-once:v-once关联的实例,只会渲染一次。之后的重新渲染,实例极其所有的子节点将被视为静态内容跳过,这可以用于优化更新性能。
v-pre:
//跳过这个元素和它的子元素的编译过程。一些静态的内容不需要编辑加这个指令可以加快编辑 <span v-pre>{{ this will not be compiled }}</span>显示的是{{ this will not be compiled }} <span v-pre>{{msg}}</span> 即使data里面定义了msg这里仍然是显示的{{msg}}
v-cloak:
//当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。 //我们可以使用 v-cloak 指令来解决这一问题。(解决屏幕闪动问题) <div id="app" v-cloak> {{context}} </div>
v-once:
<div id="app"> <p v-once>{{msg}}</p> //msg不会改变,只会在页面加载的时候,加载,不会被更新 <p>{{msg}}</p> <p> <input type="text" v-model = "msg" name=""> </p> <button v-on:click="cha">Greet</button> </div> <script type="text/javascript"> let vm = new Vue({ el : '#app', data : { msg : "hello" }, methods:{ cha(){ this.msg='asfsdfs' } } }); </script>
7,计算属性和实例方法有什么区别?
答:计算属性有缓存,实例方法没有缓存 计算属性调用时 total 不可以传参 实例方法调用时 total()可以传参 computed/methods
8,如何声明一个过滤器(全局的和局部的)
//过滤器,就是将数据被渲染到视图之前进行格式化处理,而不会修改作用域中原有的数据 //原则是:左值右量(变量也可以不写) vue.filter(‘gettime’,function(date){ Var time=new date(date) Return time.getFullyear()+’/’+time.getMonth()+1’/’+getDate() }) filters:{ Gettime(date){ Var time=new date(date) Return time.getFullyear()+’/’+time.getMonth()+1’/’+getDate() } }
9,你用过那些v-model修饰符?
答:.lazy文本框失去焦点后在更新数据 .trim清除前后空格的 .number从字符中获取数字
10,你知道那些事件修饰符
答:.stop阻止事件冒泡 .once只执行一次,一次性事件 .self阻止事件冒泡和事件捕获 .captrue事件捕获阶段触发 .prevent阻止浏览器默认行为 .native 触发原生事件
11,怎样声明全局组件,怎样使用全局组件
答:Vue.component(‘myHeader’,{ Template:` <div>全局组件</div>` }) <my-header></my-header>
12,怎样声明局部组件,怎样使用局部组件
答:声明成 ***.vue文件中模板在<template></template>中。 Js模块化导出<script></script> css<style scoped></style> 定义 import引入 注册components 调用
13,父子组件怎样实现通讯?
答:父传子:父组件:<mydiv :list='list'> </mydiv> 子组件:props[‘list’] 子传父:子组件:this.$emit(‘子组件事件名’,参数)//打电话 父组件:<mydiv @子组件事件名=‘父组件事件名’></mydiv>
14,非父子组件之间如何传递参数?
答:bus总线 兄弟组件可以父传子 子传父 pass Vuex也可以实现数据共享(官方推荐使用vuex) sessionStorgey,
15,怎样使用props限定传递的数据,有哪些属性?
答:type //限定传递的数据类型 Required:true false //是否必传 Default:false //指定默认值 // 自定义验证函数 validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 }
16,解释VUE中单向数据流的概念
答:子组件不可以直接修改父组件传过来的参数,如果直接修改会报错,只能声明成自己的才可以修改 注:this.$parent.title,可以修改父组件传过来的值
17,vue有哪些插槽,如何使用
答: 默认插槽:能够接受组件外部传给组件大段的HTML代码 <slot></slot> 具名插槽:具有name属性的插槽 可以结合template标签的slot属性,定向给插槽传递内容 作用域插槽:插槽可以控制html模板的显示与不显示。作用域插槽其实就是带数据的插槽。 原来父组件可以通过绑定数据传递给子组件。作用域插槽就可以通过子组件绑定数据传递给父组件。 slot-scope就相当于是一个对象,这个对象里面的数据就是子组件插槽绑定传上来了。
18,vue**中怎样实现组件之间的嵌套**
答:组件之间的嵌套使用,可以借助插槽,让插槽接受子组件中的内容
19,vue**中怎样操作dom**
答:ref=’name’ This.$refs.name this.$refs document.getbyid()
20,vue怎样监听数据的变化,怎样监听一个对象属性的变化
答:watch,深度监听,deep:true
21,vue中生命周期钩子函数有哪些,请写出语法
答: 创建前beforeCreate 创建后created(请求axios) 挂载前beforeMount 挂载后mounted(也可以请求axios) 更新前beforeUpdate 更新后updated 销毁前beforeDestroy 销毁后destroyed 注:默认加载组件时候,会执行哪几个
22,挂载和创建之间的区别
答:创建之后只可以访问数据不可以操作dom 挂载之后可以访问数据可以操作dom
23,keep-alive组件有什么作用?
答:缓存组件缓存页面,动态组件,router-view等 它提供了include与exclude两个属性,允许组件有条件地进行缓存。 例如: <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> 属性使用: 只缓存组件别名name为a的组件 <keep-alive include="a"> <component></component> </keep-alive> 除了name为a的组件,其他都缓存下来 <keep-alive exclude="a"> <component></component> </keep-alive>
24,vue.nextTick方法有什么用?
答:数据更新是一个 异步操作异步dom更新后使用vue.nextTick可以立即得到更新后的 数据 简单的理解是:当数据更新了,在dom中渲染后,自动执行该函数, 注意:Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新。 $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调,在修改数据之后使用 $nextTick,则可以在回调中获取更新后的 DOM, Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中,原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数,因为该钩子函数执行时所有的DOM挂载已完成。 2、当项目中你想在改变DOM元素的数据后基于新的dom做点什么,对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中;通俗的理解是:更改数据后当你想立即使用js操作新的视图的时候需要使用它 例如: created(){ let that=this; that.$nextTick(function(){ //不使用this.$nextTick()方法会报错 that.$refs.aa.innerHTML="created中更改了按钮内容"; //写入到DOM元素 }); },
25,vue实现双向数据绑定的原理是什么?
答:当一个vue实例创建后vue会便利data选项的属性,用object.defineProperty将他转化为getter或者setter,并且内部追踪相关依赖,在属性访问和修改时通知变化 每一个组件实例化都有相应的watcher程序实例,他会在组件渲染的过程中把属性记录为依赖,之后当依赖项的setter被调用时会通知watcher重新计算,从而使得它相关的组件的以更新 举例说明: <body> <p id='p1'></p> <input type='text' id='input1' name='input1'> </body> <script> var p1 = document.getElementById('p1'); var inpu1 = document.getElementById('input1'); var obj = { name:'数据' } p1.innerHTML=obj.name inpu1.value=obj.name Object.defineProperty(obj,'name',{ set:function(newdata){ p1.innerHTML=newdata console.log('设置name') }, get:function(newdata){ console.log('获取name') } }) input1.οnchange=function(){ obj.name=inpu1.value } </script>
26,什么是vue全局事件解绑?
在vue中,写在methods里面的方法,在页面切换时一般就自动销毁了, 但是写在window上的事件,需要我们手动解绑,也是为了提高代码执行效率, 使用生命周期函数Destroy,在页面离开时执行解绑, 或者有定时器,也需要在 bofordestroy销毁事件中销毁,清除
27,$set 方法有什么用? 有什么特点?
$set是用于设置对象属性的。对于没有声明的属性,直接用赋值的方法,this.xxx= yyy,视图是不会更新的 使用$set ,视图才会更新 this.list.num = 888; //不生效 this.$set(this.list,'num','888')// forEach(){ obj['sex'] = 'NAN' }
28,路由显示区域和路由跳转 分别是哪个组件?
答:显示:router-view 跳转 router-link <=> a tag=“span”? to=“path” **active-class**
29,路由中怎样传递和接收参数(单个 多个参数) window.localtion.href=""
--------------------
30,active-class的作用
active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换; 使用方式: 1、直接在路由js文件中配置linkActiveClass export default new Router({ linkActiveClass: 'active', }) 2、在router-link中写入active-class <router-link to="/home" class="menu-home" active-class="active">首页</router-link>
31,vue-router有哪几种导航钩子 分别是什么?
答: 全局 前置router. beforeEach 后置router. afterEach 路由独享的 前置beforeEnter 组件内 beforeRouteEnter(to, from, next){ //在渲染该组件的对应路由被confirm 前调用 beforeRouteUpdate(to, from, next) { //在当前路由改变,但是依然渲染该组件是调用 }, beforeRouteLeave(to, from ,next) { //导航离开该组件的对应路由时被调用 }
32,路由懒加载怎么实现,有什么意义
答:let Addclass = resolve =>require([' @/views/Addclass' ] ,resolve )
33,Vue项目性能优化?
代码减少对服务器请求次数** **减小对服务器** **请求代码的体积 v-if 和 v-show选择调用 为item设置唯一key值 减少watch的数据 全局事件解绑函数节流函数防抖 Keep- alive缓存 css精灵图字体图标 spa单页应用图片(数据)懒加载<!--使用前需先安装配置vue-lazyload--> 路由懒加载 Webpack打包压缩代码
34,vue路由模式有哪几种,怎样切换有什么区别
答:hash,history (1 )在url显示: hash有# ; history 无#对seo比较友好 (2)回车刷新: hash可以加载到hash值对应页面; history 一般就是404掉了 (3 )支持版本: hash支持低版本浏览器和IE浏览器 ; history,HTML5新推出的API不支持ie低版本
35,vue组件中的data为什么必须是一个函数
答: 如果data是一个函数的话,这样每复用一次组件,就会返回一份新的data,类似于给每个组件实例创建一个私有的数据空间,让各个组件实例维护各自的数据。而单纯的写成对象形式,就使得所有组件实例共用了一份data,就会造成一个变了全都会变的结果。
36,$route和$router有什么区别
$route是路由信息对象”,包括path, params, hash, query, matched, name 等路由信息参数。 而$router是“路由实例"对象包括了路由的跳转方法,钩子函数等
37,vue如何兼容ie
插件 最低兼容得到ie9 babel-polyfill https://blog.csdn.net/XuM222222/article/details/81561890
38,V-on 是都可以监听多个方法 怎样 实现?
-------------
39,开发环境与生产环境的区分
//process.env.NODE_ENV if` `(process.env.NODE_ENV === ``"development"``) { ``alert(``"开发环境"``); baseurl = "https://www.baidu.com" }``else` `{ ``alert(``"生产环境"``); baseurl = "https://www.test.com" }
40,什么情况会使用到vuex vuex有哪些核心的属性?
state => 基本数据 getters => 从基本数据派生的数据 (Getter相当于vue中的computed计算属性) mutations => 提交更改数据的方法,同步! (commit) actions => 像一个装饰器,包裹mutations,使之可以异步。 (dispath) modules => 模块化Vuex 如果我们不喜欢这种在页面上使用“this.$stroe.state.count”和“this.$store.dispatch('funName')”这种很长的写法,那么我们可以使用mapState、mapGetters、mapActions就不会这么麻烦了;
1, dataScrSetupFlag: true, //总数据总览总设置开关(设置一些开关等,到达一些样式变化的效果)
2,项目的产品的一些配置信息
3,userName: '', // 重置密码之后的 用户名密码 跳转登陆的时候填入
4,api接口路径:http://baidu.com
5,用户信息的存储(token),购物车数据的存储等
vuex的缺点:
vuex没有持久化存储的手段,每次刷新都会重置所有的数据
41,vue中key的作用
diff算法,使用key来给每个节点做一个唯一标识,Diff算法就可以正确的识别此节点,找到正确的位置区插入新的节点。 所以一句话,**key的作用主要是为了高效的更新虚拟DOM**。 另外vue中在使用相同标签名元素的过渡切换时,也会使用到key属性,其目的也是为了让vue可以区分它们, 否则vue只会替换其内部属性而不会触发过渡效果。
42,Diff算法 的运行机制?
概念: diff算法是一种优化手段,将前后两个模块进行差异对比,修补(更新)差异的过程叫做patch(打补丁) 通俗的讲,当前层级的dom 先进行对比,如果发现异同 就更新当前dom 和 它的子节点
<!--为什么vue,react这些框架中都会有diff算法呢? 我们都知道渲染真实dom的开销是很大的,这个跟性能优化中的重绘重排意义类似, 回到正题来, 有时候我们修改了页面中的某个数据,如果直接渲染到真实DOM中会引起整棵数的重绘重排, 那么我们能不能只让我们修改的数据映射到真实DOM, 做一个最少化重绘重排呢-->
注:Key值唯一 提高虚拟dom的对比效率 问:Key值的作用 为什么最好不要用index??? Index 索引可以随着队列的操作发生变化 不利于虚拟dom之间的对比 [ [id:004,小李] 0 [id:001,小明] 1 [id:002,小红] 2 [id:003,小花] 3 ]
----------
总结 - 尽量不要跨层级的修改dom - 在开发组件时,保持稳定的 DOM 结构会有助于性能的提升 - 设置key可以让diff更高效
43,axios
axios,是基于Promise的http库,用来实现浏览器请求服务器的工具 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 自动转换 JSON 数据 客户端支持防御 XSRF #### axios 的语法 get,请求的方式,如果表单请求,请使用post url,请求的文件地址 then,请求成功时的回调函数 catch,请求失败时的回调函数
44,axios 数据请求
post请求,需要qs序列化 当axios请求为post,表单提交时,header需要设置content-type为application/x-www-form-urlencoded, 放在body体的参数格式为 requestbody { name:xxx, age:xxx }, 后台就接收不到参数 这时就需要将参数序列化,用qs序列化参数(qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.),qs.stringify(parmas),转完之后的格式为:formdata name:xxx, age:xxx
二:React 面试题
45,vue与React的异同
技术层面:》》》》
-
Vue 生产力更高(更少的代码实现更强劲的功能)
-
React 更 hack 技术占比比较重
-
两个框架的效率都采用了虚拟 DOM
-
性能都差不多
-
-
组件化
-
Vue 支持
-
React 支持
-
-
数据绑定
-
都支持数据驱动视图
-
Vue 支持表单控件双向数据绑定
-
React 不支持双向数据绑定
-
-
它们的核心库都很小,都是渐进式 JavaScript 库
-
React 采用 JSX 语法来编写组件
-
Vue 采用单文件组件
-
template
-
script
-
style
-
开发团队:》》》》
-
React 由 Facebook 前端维护开发
-
Vue
-
早期只有尤雨溪一个人
-
由于后来使用者越来越多,后来离职专职开发维护
-
目前也有一个小团队在开发维护
-
社区:》》》》》
-
React 社区比 Vue 更强大
-
Vue 社区也很强大
Native APP 开发:》》》》
-
React Native
-
可以原生应用
-
-
Weex
-
阿里巴巴内部搞出来的一个东西,基于 Vue
-
46,react 生命周期函数
constructor :创建 componentWillMount: 在渲染前调用,在客户端也在服务端。 componentDidMount : 在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可以通过 this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用,可以在这个 方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。 componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会 被调用。 shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。 componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。 componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。 componentWillUnmount在组件从 DOM 中移除之前立刻被调用。
47,React组件的三大属性 及作用?
1,refs 操作dom 2,props 接受参数, 路由跳转,路由接收传参 3,state 组件声明自己的状态
48,React 父子组件之间怎样传递参数?
父传子 属性传递this. props.属性名接收 子传父 把父组 件的方法传给子组件子组件给父组件的方法传值//通过props打电话,触发组件标签上的方法传值
48,React 两个路由页面之间怎样传递参数?
1动态路由配置传参 配置: path=’/detail/:id’ 传参 : to=’/detail/100’ 接收: this.props.match.params.id 2 js跳转传参 this.props.history.push({ pathname : '/user' ,query : { day: 'Friday'} }) this.props.location.query.day 3 通过state同query差不多,只是属性不一样,而且state传的参数是加密的 this.props.history.push({ pathname:'/user',state:{day : 'Friday' } }) this.props.location.state.day
49,redirect路由组件有什么作用?
路由重定向,实现路由的跳转可以模拟实现路由守卫的功能
50,react的展示组件,和容器组件的区别
如果我们把两个功能都放在同一个组件内,那么这个组件做的事情就太多了,考虑到组件复用和业务变更,让一个组件只专注做一件事,我们可以把这个组件拆分成多个组件,让每个组件只专注做一件事,所以就衍生了一种React常用的模式:容器组件和展示组件。 展示组件: 关注UI层 有自己等dom和样式 没有自己的状态 不关心数据是如何获取和变化的 通过props接收数据和回调函数 不依赖其他组件 不需要生命周期函数 容器组件: 提供数据 关注业务处理 与状态管理工具交互 有自己的状态(state) 几乎没有dom和样式 通俗的讲:展示组件,只负责展示,可以复用,容器组件,有数据请求,不能复用
51,类组件(Class component)和函数式组件(Functional component)之间有何不同
区别 | 函数组件 | 类组件 |
---|---|---|
是否有this | 没有 | 有 |
是否有生命周期 | 没有 | 有 |
是否有state | 没有 | 有 |
52,状态(State) 和 属性(Props)
State 是一种数据结构,用于组件挂载时所需数据的默认值。State 可能会随着时间的推移而发生突变,但多数时候是作为用户事件行为的结果。 Props(properties 的简写)则是组件的配置。props 由父组件传递给子组件,并且就子组件而言,props 是不可变的(immutable)。组件不能改变自身的 props,但是可以把其子组件的 props 放在一起(统一管理)。Props 也不仅仅是数据–回调函数也可以通过 props 传递。 个人理解: State:是可变的,是一组用于反映组件UI变化的状态集合; Props:对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。 在组件状态上移的场景中,父组件正是通过子组件的Props, 传递给子组件其所需要的状态。
53,何为受控组件(controlled component)
在 HTML 中,类似 <input>, <textarea>和 <select> ,这样的表单元素会维护自身的状态,并基于用户的输入来更新;当用户提交表单时,前面提到的元素的值将随表单一起被发送。但在 React 中会有些不同,包含表单元素的组件将会在 state 中追踪输入的值,并且每次调用回调函数时,如 onChange 会更新 state,重新渲染组件。一个输入表单元素,它的值通过 React 的这种方式来控制,这样的元素就被称为"受控元素"。
54,当我们调用方法时 this指向问题怎样修正?
1,调用时候,bind(this)onClick={this.abc.bind(this)} 2,在constructer中初始化方法,this.abc=this.abc.bind(this)/onClick={this.abc} 3,箭头函数
55,(在构造函数中)调用 super(props) 的目的是什么
-------------
56,Redux有哪些核心特性?
1,state 数据 2,action 下达命令(定义type,比如我要干啥) 3,reducer 操作数据的系统(根据type,更新state,比如根据action定义的找东西) 4,store 管理者(UI视图唯一数据来源(直接或间接),可以获取state,更新state,监听state变化,取消监听) store.getState() 获取当前state store.dispatch(action) 更新state store.subscribe(listener) store更新后回调listener
57,react diff 原理
1,把树形结构按照层级分解,只比较同级元素。 2,给列表结构的每个单元添加唯一的 key 属性,方便比较。 3,React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字) 4,合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, 5,React 检查所有标记 dirty 的 component 重新绘制. 6,选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
三:小程序
58,简单描述一下微信小程序的相关文件类型
答: WXML:(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构, 内部主要是微信自己定义的-套组件。 WXSS:(WeiXin Style Sheets)是一套样式语言,用于描述WXML的组件样式, js : 逻辑处理,网络请求 json:配饰文件小程序设置,如页面注册,页面标题及tabBar注册组件。 项目启动文件app.json 必须要有这个文件,如果没有这个文件,项目无法运行,因为微信框架把这个作 为配置文件入口,整个小程序的全局配置。包括页面注册,网络设置,以及小程.序的window背景色,配置导航条 样式,配置默认标题。
59,页面内部有什么参数传值的方法?
id ={{item.id}}或者data-xxxx={{item.index}} 获取: e.currentTarget.dataset.id 或者 e.currentTarget.dataset.xxxx form表单获取值: e.detail.value.xxxx
60,:小程序两个页面之间怎样传递和接受数据?
1,<navigator url='/pages/test/test?id=111&name=张三' >跳转</navigator> onLoad: function(datas) { console.log(datas); } 2,使用全局数据存储 const app = getApp() app.globalData.userid = 998888 /
61,小程序组件和组件之间怎样实现通讯?
组件的通信 父传子属性传递 属性必须在properties 里边进行声明 properties: { pdata:{ type:String } }, 子传父发送事件:triggerEvent onTap: function () { var myEventDetail = {} // detail 对象,提供给事件监听函数 var myEventOption = {} //触发事件的选项 this . triggerEvent( 'myevent, myEventDetail, myEventOpt ion) }
62,小程序如何阻止事件冒泡?
catchtap:catch`事件绑定可以阻止冒泡事件向上冒泡。
63,小程序路由
第一种方法:
小程序里面的链接使用navigator组件
<navigator url="http://www.baidu.com">跳转A</navigator> //跳转不成功 <navigator url='test/t' >跳转B</navigator>//跳转成功
第二个能正确跳转, 需要注意的是: url中的页面不能是tabBar(底部菜单)中的页面
但是如果open-type属性的值为switchTab, 则可以跳转到tabBar中的页面
open-type属性取值:
navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 redirect 对应 wx.redirectTo 的功能 switchTab 对应 wx.switchTab 的功能 reLaunch 对应 wx.reLaunch 的功能 1.1.0 navigateBack 对应 wx.navigateBack 的功能 1.1.0
第二种方法:api里面跳转
路由方式 | 触发时机 |
---|---|
初始化 | 小程序打开的第一个页面 |
打开新页面 | 调用 API wx.navigateTo |
页面重定向 | 调用 API wx.redirectTo |
页面返回 | 调用 API wx.navigateBack |
Tab 切换 | 调用 API wx.switchTab |
重启动 | 调用 API wx.reLaunch |
64,小程序开发的优势
1)容易上手,只要之前有HTML+CSS+JS基础知识,写小程序基本上没有大问题,当然如果 了解ES6+CSS3则完全可以编写出即精简又动感的小程序; 2)基本上不需要考虑兼容性问题,只要微信可以正常运行的机器,就可以运行小程序; 3 ) 基本组件库已经比较齐全:Toast,Loading框,Picker,定位及地图,Image,Input,Checkbox,ext,TextAre- SrollView.等常用的组件都有,而且使用也挺简单、方便; 4)发布、审核高效,基本上上午发布审核,下午就审核通过,升级简单,而且支持灰度发布;(灰度发布是对某一产品的发 布逐步扩大使用群体范围,也叫灰度放量) 5)微信官方提供使用人数、频率等数据统计,小程序is脚本执行错误日志; . 6)开发文档比较完善,开发社区比较活跃; 7)支持组件化开发,
65,小程序怎样做到自适应?
一般都以苹果6为基准 苹果6下1px=2rpx 用1:2去换算 Rpx是一个响应式的单位自动实现自适应
66,请谈谈小程序的双向绑定
//bindinput绑定事件,在js中通过this.setData实现 <input class="" placeholder="添加数据" bindinput="getVal" value=""/> //js: getVal(e){ this.setData({ val: e.detail.value }) }
67,请谈谈小程序项目的生命周期函数?(三星一下)
onLoad() 页面加载时触发,只会调用一次。可获取当前页面路径中的参数。 Onshow() 页面显示/切入前台时触发,一般用来发送数据请求; onReady() 页面初次渲染完成时触发,只会调用-次,代表页面已可和视图层进行交互 onHide() 页面隐藏/切入后台时触发,如底部tab切换到其他页面或小程序切入后台等。 onUnload()页面卸载时触发,如redirectTo 或navigateBack到其他页面时。