前端前进日记 2020-10-30

2020-10-29

1.computed 计算属性和 watch监听器

​ 主要比比自己之前忽略的点

​ computed具有缓存性， 这是很棒的，优化项目性能。用法记得return

​ watch 之前自己主要用途是监听父组件给子组件的值没有在视图上渲染更新。

​ 现在知道了，如果监听是二维数组什么的，或者一个对象里包括了很多不同数据类型，需要deep，不加监听不到，vue会自动跳过

2.prop 和props

还是自己缺陷，之前主要是父组件给子组件 用到props，以为只有这个作用，今天封装ui组件，发现自己狭隘 了。

所谓prop就是传值比如哈

<blog-post title="My journey with Vue"></blog-post>

props更像是文档约束了 title的数据类型和默认值，当然上举例和这个不配，太累懒得换了反正是我自己看

3.封装ui组件踩坑之旅

<template>
  <div class="home">
    <BzForm :model="userInfo" :rules="rules" ref="loginForm">
      <BzFormItem label="给爷输入账号" prop="userName">
        <BzInput v-model="userInfo.userName" placeholder="输入账号"></BzInput>
      </BzFormItem>
      <BzFormItem label="给爷输入密码" prop="userPassword">
        <BzInput
          type="password"
          v-model="userInfo.userPassword"
          placeholder="输入密码"
        ></BzInput>
      </BzFormItem>
      <!-- {{ userInfo.userName }} -->
      <BzFormItem>
        <button @click="login">提交</button>
      </BzFormItem>
    </BzForm>
  </div>
</template>

bz是我的名字，封装组件有双向绑定 校验 弹框 这些比较大看的到功能。
用到了之前没有用到的$parent和provide()传值，$parent.$emit在子组件向父组件发送值

弹框用到的底层比较多贴代码不比比文字了

// 弹窗不能和app一个实例下，不好控制，
import Vue from 'vue'

function create(Component,props){
  // h是createElement，返回VNode
  // 需要挂载才能成为真实的dom元素
  // 不挂载宿主元素，会生成真的dom，追加操作
  const vm = new Vue({
    render: h => h(Component,{props})
  }).$mount()
  
  // appendChild向body节点后增加节点
  document.body.appendChild(vm.$el)

  const comp = vm.$children[0]

  //移除掉手动挂载的jb节点
  comp.remove =()=>{
    document.body.removeChild(vm.$el)
    vm.$destroy()
  }
  return comp
}

export default create

ps明天预习promise