vue项目实战遇到的那些问题

xxx实战系统–微信菜单自定义模块

功能模块介绍：该模块仿照微信公众号后台对百果园的公众号的底部菜单栏进行自定义化配置并且支持发布前微信标签的配置功能。功能分有：查询默认菜单内容、可展示保存并且直接发布、微信菜单栏列表查询、修改、筛选、新增、发布、以及发布前的微信标签的匹配

记录点一：样式布局

css的伪类 + 绝对定位

before + after是css伪类，以前很少运用场景能用上，在我的理解上就是使用css对一个元素的内容的扩展。

• 进行导航栏部分内容展示(绝对定位实现垂直居中)

.h2 {
    position:relative;
    line-height:20px;
}
.h2::before，.h2::after{
    background:url() 100% 100% no-repeat;
    display:block;
    content:'';
    position:absolute;
    top:50%;
    transform: translateY(-50%)
}

• 菜单栏的底部三角形的制作

// 三角形的颜色由 border-color 决定。三角形的方向也是看red的位置在什么地方，上 右 下 左 排在哪个位置则会由red的位置相反面 
div{
    content:'';
    position:absolute;  
    width:0px;
    height:0px;
    border-width:0px;
    border-style:soild;
    border-color: transparent  transparent  transparent  red;
}

弹性布局flex

弹性布局的好处就是可以根据元素个数再根据一定规则进行响应布局，可以是固定的，也可以是参照父级进行相应变化。

记录点二：数据更新渲染

在模块的实现过程中，难免会涉及到父子组件中数据传递，这次我采用的是父组件执行一定动作更改prop的参数，在子组件中watch监听变化，再做出相应的操作，子组件向父组件传参则采用this.$emit()携带参数即可。

但是发现：当子组件的值发生变化并且传递到父组件时，内容可以接收到，但是发现没有动态渲染，查询相关资料后发现，vue的数据变化的监听也是有一定的要求的·涉及到复杂的数据类型，则可能不会监听响应

• 情况1 : 在组件实例中

export default{
    data(){
        return {
            obj:{}
        }
    },
    mounted(){
       this.obj.push({button:{
           namr:'ss',
           sub_button:[]
       }})  //视图可以满足响应式变化
    },
    method:{
        test(index){
            this.obj.button.sub_button[index] = 'dd' //打印this.obj 会发现数据更新但是视图不更新的情况 
        }
    }
}

原因：vue只是会实时响应再data里面定义好的数据，即vue中在data里面声明的数据才具有响应式的特性。

强制vue的数据渲染更新机制

• 数组更新检测机制,下面这些函数可以触发vue视图的更新

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

• 使用Vue.set( target, propertyName/index, value )实例方法强制更新,在vue单页组件内则this.$set的形式使用

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = ‘hi’)

target：Object/Array
propertyName/index: string/number
value:any

• 为已知对象赋予多个新属性,这样是将数组浅拷贝到一个新的数组中

this.userProfile =  Object.assign({}, this.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

• 当在子组件中需要依赖父组件所传递的值，使用watch去监听

//错误做法
props: ['msg']
data () {
  return {
	value: this.msg
 }
}
//正确做法
props: ['msg']
data () {
  return {
	value: this.msg
 }
}，
watch:{
   msg(newVal,oldVal){
       this.value = newVal
   } 
}

记录点三：数据验证细节

• 为点击任何菜单项不可进行保存或者发布操作
• 清空操作时进行二次提醒验证
• 因为该个性菜单的创建不会做任何重复校验，所以在点击创建的按钮时防止用户反复点击，请求速度过慢时会导致反复请求，则需要添加上loading，直到请求完成后解除loading、或者将button设置disabled
• 必填项的校验需要从上到下逐步验证，校验提醒方式可以使用el-form的表单校验方法，输入框标红，底部进行消息提示
• 动态的验证填写的url地址是否合法，尝试过很多办法，还是使用@input监听

   vaildUrl(str){
       
   }

记录点四：vue实现拖拽

其实在这之前一直觉得拖拽是一个很高大上的事件，但是当我们看一下vue衍生出来的组件时，就会发现。一切变得如此简单。

• 安装awe-dnd

npm install awe-dnd --save

• 在Vue项目中引入awe-dnd

import VueDND from 'awe-dnd'
Vue.use(VueDND)

• 在需要拖拽的for循环列表中使用v-dragging指令

v-dragging ="{ item: color, list: colors, group: 'color' }"
#组件的参数说明

item:一个可拖拽的对象
list:可拖拽对象列表
gorup:相当于是拖拽列表的unique key

记录点五：watch属性的深入使用

我找遍了vue的官方文档都没有找到相关的信息，没有想到的是在watch这个属性还有很多用法

watch:{
    someData:{
        handler(val){
            
        }, //在监听属性变化的时候 
        deep:true,  //默认为false,是否支持深度监听，如果监听的是对象的，此时的属性发生变化则也能被监听到
        immediate:true //默认为false，是否在data初始化渲染的时候执行handler操作
    }
}

总结

对vue的学习真的是很片面了。需要学习的东西还很多~~