vue1踩坑

Posted 2020-11-06 刘家三胖

1. 双向绑定的对象 改变或新增其属性 DOM不刷新问题

var obj = {
    "attr1": "1",
    "attr2": [2]
};
new Vue({
　　el: ‘#app‘, 
　　data: {
　　　　obj: obj
　　},
   methods: {
　　　　do: function(){
          obj.attr1 = 10;         //视图刷新
　　　　　　obj.attr2[0] = 20;      //视图不刷新
          obj.attr2.length = 0;   //视图不刷新
　　　　　　obj.attr3 = 3;          //视图不刷新
　　　　}

　 }
　　....
})

这是因为Vue 会在初始化实例时对属性执行 getter/setter 转化过程，并用computed来添加需要计算的属性，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。

对象obj新增的attr3属性没有经过初始化的getter/setter转化，obj.attr3的双绑不会成功，必须用VUe的 set() 方法, 

 Vue.set( obj, "attr3", 3 )； //视图刷新

同时由于javascript的限制，直接用索引设置元素或者修改数组的长度，这两种变化都不能被检测到，要使用 $set() 或 vue 包装过的变异方法： push() pop() shift() unshift() splice() sort() reverse()

 

2.vue中使用props传值注意： camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名

  Vue.component(‘child‘, {
    // camelCase in JavaScript
    props: [‘myMessage‘],
    template: ‘<span>{{ myMessage }}</span>‘
  })

  <!-- kebab-case in html -->
  <child my-message="hello!"></child>

 

3.VUE与Nunjucks同时使用 定界符冲突 将定界符改成 ${} 形式

  VUE1：

Vue.config.delimiters = [‘${‘, ‘}‘];

VUE2：

var vm = new Vue( {  
        el: ‘#app‘,  
        data: {  
            childrens: {  
                name: ‘ljl‘,  
                age: 18,  
                sex: ‘女‘  
            },  
            tdArray:["1","2"]
            isShow:true  
        },  
        delimiters:[‘${‘, ‘}‘]  
    } );  

 

未完待续。。。