用vue开发了一段时间，针对团队中出现的问题做一下记录。文字表达能力不太好，大家将就看下，问题大概如下：

v-cloak属性

数组更新问题

对象更新问题

render函数使用

1. `v-cloak` 属性

vue的模板建议都加上v-cloak属性，网页加载的时候，先加载html，再加载js，网络不太好的情况下，页面会看到没有渲染的模板，不太美观。

假如用户的网络不太好，2s才把js文件下载下来，这里用setTimeout来模拟

没加v-cloak属性的代码

没加v-cloak属性的代码运行效果

下面是加了`v-cloak`的代码，在模板元素上加`v-cloak`属性，同时加一个样式，
[v-cloak]{
    display:none;
}
没有渲染的模板直接不显示给用户，当模板渲染后，vue会把v-cloak属性删除，所以下面代码运行效果是，前2s页面是空白的，2s后才显示渲染后的内容

加了v-cloak的代码

2.数组更新问题

代码

<body>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
    <div id="app" v-cloak>
        <div v-for="item in items">
            {{item}}
        </div>
    </div>
    <button onclick="update()">更新2为new2</button>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var items = [1,2,3,4,5]
        var vm = new Vue({
            el: '#app',
            data:{
                items: items
            }
        })
        function update(){
            items[1] = 'new2'
        }
    </script>
</body>

我想更新items第2项的值为new2，点击按钮的时候，发现数据并没有更新，其它vue文档里面有说明，哪些操作数组是可以检测到更新(文档链接)和注意事项(文档链接)，用索引直接改变数组的值vue是不能检测到变动的，但是有提供解决方法，用$set方法

items[1] = 'new2'
改成
vm.$set(vm.items, 1, 'new2')

3.对象检测更新

<body>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
    <div id="app" v-cloak>
        <div v-for="(item, index) in items">
            <div v-show="!item.isHide">
                title:{{item.title}} <br/>
                content:{{item.content}}<br/>
                <button @click="hide(item)">隐藏</button>
            </div>
            <hr>
        </div>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var items = [
            {
                title:'title1',
                content:'content1'
            },{
                title:'title2',
                content:'content2'
            }
        ]
        new Vue({
            el: '#app',
            data:{
                items:items
            },
            methods:{
                hide:function(item){
                    item.isHide = true
                }
            }
        })
    </script>
</body>

点击隐藏的时候想隐藏当前数据，隐藏是用对象的isHide属性控制的，点击的时候，我们给当前对象添加一个isHide属性，值为true，但是并没有实现我们需要的效果。为什么呢，因为Vue 不能检测对象属性的添加或删除，那怎么整？
解决方法有两种：

遍历数据前，给所有对象加上isHide这个属性

用$set函数

遍历数据前，给所有对象加上isHide这个属性

var items = [
            {
                title:'title1',
                content:'content1'
            },{
                title:'title2',
                content:'content2'
            }
        ]

        items.forEach(v=>{
            v.isHide = false
        })
        
        new Vue({
            el: '#app',
            data:{
                items:items
            },
            methods:{
                hide:function(item){
                    item.isHide = true
                }
            }
        })

用`$set`函数

new Vue({
            el: '#app',
            data:{
                items:items
            },
            methods:{
                hide:function(item){
                    this.$set(item, 'isHide', true)
                }
            }
        })

留个问题给大家，代码如下，1s后我用索引改变数组第2项的`content`属性的值，能否生效

<body>
    <style type="text/css">
        [v-cloak]{
            display: none;
        }
    </style>
    <div id="app" v-cloak>
        <div v-for="(item, index) in items">
            title:{{item.title}} <br/>
            content:{{item.content}}<br/>
            <hr>
        </div>
    </div>
    <script type="text/javascript" src="vue.js"></script>
    <script type="text/javascript">
        var items = [
            {
                title:'title1',
                content:'content1'
            },{
                title:'title2',
                content:'content2'
            }
        ]
        new Vue({
            el: '#app',
            data:{
                items:items
            }
        })
        setTimeout(function(){
            items[1].content = 'newcontent'
        },1000)
    </script>
</body>

4.render函数

我们的项目的数据基本都是题目数据，数据来源比较多，所以数据格式多种多样，但题目的类型是相对固定的，基本是选择题（单选题，多选题），判断题，排序题，连线题等，所以我们针对这些题目做了相应的组件，每种组件的需要的数据格式我们定义一种通用的格式，把各种不同的数据格式转成通用格式组件就可以复用了。那么问题来了，程序传一组数据（试卷）进来，我们怎么根据题类型的去调用相应的组件渲染呢？用v-if？

题目基本类型

选择题

排序题

题目数据中有个type字段来用标识题目类型

1 表示单选题

2 表示多选题

3 表示排序题

定义组件

选择题

数据格式

       {
            title:'dan xuan ti',//标题
            type:1,//题目类型
            options:['danxuan1','danxuan2','danxuan3','danxuan4'] //题目选项
        }

单选题和多选题目其实可以用一个组件，只是标题有和input的type有些不一样

选择题组件代码

Vue.component('e-choice',{      
        template:`
            <div>
                <div>题目类型:{{typeName}}</div>
                <div>{{index}}. {{topic.title}}</div>
                <div v-for="(option,key) in topic.options">
                    <input :type="inputType" :name="index" />{{choiceOption(key)}}: {{option}}
                </div>
            </div>
        `,
        methods:{
            choiceOption:function(index){
                return String.fromCharCode(65+index)
            }
        },
        computed:{
            typeName:function(){
                return this.topic.type === 1? '单选题':'多选题'
            },
            inputType:function(){
                return this.topic.type === 1? 'radio':'checkbox'
            }
        },
        props:['index','topic']
    })

index 是题目在这张试卷中的顺序，
topic 是题目数据
单选题用radio，多选题用checkbox

单选题渲染效果

单选题渲染效果

多选题渲染效果

多选题渲染效果

排序题

数据格式

       {
            title:'pai xu ti',
            type:3,
            options:['pai xu 3','pai xu 2','pai xu 1','pai xu 4',]
        }

排序题组件代码

Vue.component('e-sort',{
        template:`<div>
                        <div>题目类型:排序题</div>
                        <div>{{index}}. {{topic.title}}</div>
                        <blockquote>
                            <div v-for="(option,key) in topic.options">
                            {{key+1}}: {{option}}
                        </div>
                        </blockquote>
                    </div>`,
        props: ['index','topic']
    })

很简单，只是遍历下数据

渲染效果

现在给了一张试卷数据，怎么根据题目类型调用相应的组件把这些数据渲染出来呢

var data = [
        {
            title:'dan xuan ti',
            type:1,
            options:['danxuan1','danxuan2','danxuan3','danxuan4']
        },
        {
            title:'pai xu ti',
            type:3,
            options:['pai xu 3','pai xu 2','pai xu 1','pai xu 4',]
        },

        {
            title:'duo xuan ti',
            type:2,
            options:['duoxuan1','duoxuan2','duoxuan3','duoxuan4']
        },
        {
            title:'pai xu ti',
            type:3,
            options:['pai xu 3','pai xu 2','pai xu 1','pai xu 4',]
        },{
            title:'dan xuan ti',
            type:1,
            options:['danxuan1','danxuan2','danxuan3','danxuan4']
        },
        {
            title:'pai xu ti',
            type:3,
            options:['pai xu 3','pai xu 2','pai xu 1','pai xu 4',]
        },
        
        {
            title:'duo xuan ti',
            type:2,
            options:['duoxuan1','duoxuan2','duoxuan3','duoxuan4']
        },
        {
            title:'pai xu ti',
            type:3,
            options:['pai xu 3','pai xu 2','pai xu 1','pai xu 4',]
        }
    ]

这里我们就可以用render函数来解决我们的问题

new Vue({
        el:'#app',
        data:{
            topics:data
        },
        render:function(createElement){
            return createElement('div', this.topics.map((v,index)=>{
                switch(v.type){
                    case 1://单选题
                    case 2://多选题
                        return createElement('e-choice',{
                                        props:{
                                            index:index + 1,
                                            topic:v
                                        }
                                    })
                        break
                    case 3://排序题
                        return createElement('e-sort',{
                                        props:{
                                            index:index + 1,
                                            topic:v
                                        }
                                    })
                        break
                    default:
                        console.error('type not implement')
                        break
                }
            }))
        }
    })

QQ20180420-125421@2x.png

最后打个广告

招前端开发，简历投递：liubin#readboy.com，#替换成@，简历标注：简书

Vue开发问题总结

Vue开发问题总结

1. `v-cloak` 属性

2.数组更新问题

代码

3.对象检测更新

遍历数据前，给所有对象加上isHide这个属性

用`$set`函数

留个问题给大家，代码如下，1s后我用索引改变数组第2项的`content`属性的值，能否生效

4.render函数

题目基本类型

定义组件

选择题

选择题组件代码

排序题

排序题组件代码

最后打个广告

Vue开发问题总结

1. v-cloak 属性

2.数组更新问题

代码

3.对象检测更新

遍历数据前，给所有对象加上isHide这个属性

用$set函数

留个问题给大家，代码如下，1s后我用索引改变数组第2项的content属性的值，能否生效

4.render函数

题目基本类型

定义组件

选择题

选择题组件代码

排序题

排序题组件代码

最后打个广告

1. `v-cloak` 属性

用`$set`函数

留个问题给大家，代码如下，1s后我用索引改变数组第2项的`content`属性的值，能否生效