vue和小程序相关复习题

vue和小程序相关复习题

1. vuex的5个核心属性是什么，有什么用。

   属性	作用
   state	保存需要全局共享的数据，组件中访问state里面的数据用this.$store.state.数据名
   mutation	修改state唯一手段
   action	提交 mutation，执行 store.commit；页面中调用这个 action，执行 store.dispatch
   module	模块化vuex，每一个模块拥有自己的state、mutation、action、getters
   getter	从基本数据(state)派生的数据，相当于state的计算属性，具有返回值的方法

2. Vuex中action通常是异步的，那么如何知道action什么时候结束呢？

   使用store.dispatch调用action函数返回Promise，对于Promise可以使用Promise.then() 或async / await控制异步顺序

3. vue-router中，讲一下完整的导航守卫流程？

   1. 导航被触发。
   2. 在失活的组件里调用 beforeRouteLeave 守卫。
   3. 调用全局的 beforeEach 守卫。
   4. 在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。
   5. 在路由配置里调用 beforeEnter。
   6. 解析异步路由组件。
   7. 在被激活的组件里调用 beforeRouteEnter。
   8. 调用全局的 beforeResolve 守卫(2.5+)。
   9. 导航被确认。
   10. 调用全局的 afterEach 钩子。
   11. 触发 DOM 更新。
   12. 用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

4. 微信小程序的页面生命周期有哪些，组件生命周期有哪些？

   页面生命周期函数：

   • onLoad：页面加载，一个页面只有一次
   • onReady：监听页面初次渲染完成
   • onShow：监听页面显示
   • onHide：监听页面隐藏
   • onUnload：监听页面卸载

   组件生命周期：

   • created：组件实例刚被创建时，不能调用setData ，用于给组件this添加一些自定义属性字段

   • attached：在组件完全初始化，进入页面节点树， this.data 已被初始化为组件的当前值

   • detached：组件离开页面节点树后， 退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发

   • ready：视图层布局完成

   • move：组件实例被移动到节点树另一个位置

5. 微信小程序页面传参有那几种方式，组件之间如何通信？

   • 使用全局变量

     app.js文件定义全局变量

     App({
         globalData : {
             foo : 'bar'
         }
     });
     

     页面中getApp()获取全局对象

     var app = getApp()
     var getFoo = app.globalData.foo
     app.globalData.foo = 'fun'
     

   • 页面跳转或重定向时，利用url传参 url: ‘path?key=value&key2=value2’

     // A页面跳转
     goB(){
         wx.navigateTo({
           url: '/pages/B/index?id=value',
         })
       },
     // B页面接收
     onLoad: function (options) {
     	console.log('id', options.id)
     }
     

   • 使用本地数据缓存

     // A页面跳转
     goB(){
         wx.setStorage({
               key:"key",
               data: res.userInfo
         })
         wx.navigateTo({
           url: '/pages/B/index',
         })
     }
     // B页面接收
     getUsersInfo: function () {
     	wx.getStorage({
     	      key: 'key',
     	      success: function (res) {
     	        this.userInfo = res.userInfo;
     	      }
     	})
       }
     

6. 微信小程序的双向绑定和vue的，有何不同

   • 小程序中双向绑定：

     1. 使用bindinput绑定文本框输入事件
     2. 动态绑定文本框value属性，data中声明变量，
     3. 在bindinput绑定事件中，通过e.detail.value获取文本框最新value值
     4. 使用this.setData将文本框最新value值赋给动态绑定的value属性

   • vue中双向绑定：

     1. 为文本框绑定@input监听文本框输入事件

     2. 为文本框绑定value属性，值为在data中定义的变量

     3. 在@input绑定的事件中，通过event.target.value获取文本框中最新的value值

     4. 将获取到的最新value值赋给动态绑定的value属性

   • 区别：

     绑定事件不同，获取value值得方式不同，在小程序中data数据修改需要调用this.setData方法

7. openid和unionid，有何不同，各有什么用处

   • 长度不同 openid 28 unionid 29
   • openid是同一用户同一应用的唯一标识
   • unionid是同一用户不同应用的唯一标识