Vue的computed不改变data值

**关于computed的计算属性是否改变data的原来的值，废话不说直接上代码，实现一个搜索

// DOM代码
<div id="app">
    <input type="text" placeholder="请输入姓名" @input="setName" v-model="name" />
    <ul v-for="(item, index) in nameList">
        <li :key="item">{{item}}---{{index}}</li>
    </ul>
</div>

// vue实例对象
    var vm = new Vue({
        el: "#app",
        data: {
            name: '',
            nameList: ['狮子', '大象', '老虎']
        },
        methods: {
            setName () {
				this.nameList = this.nameList.filter(item => {
                    return item.indexOf(this.name) > -1
                })
            }
        }
    })

**你会发现搜索可以，但是清除的话回不去了，下面咱们用另外一个vue实例实现一下

var vm = new Vue({
        el: "#app",
        data: {
            name: '',
            nameList: ['狮子', '大象', '老虎'],
            lowNameList: ['狮子', '大象', '老虎']
        },
        methods: {
            setName () {
                let newArr = this.lowNameList.filter(item => {
                    return item.indexOf(this.name) > -1
                })
                this.nameList = newArr
            }
        }
    })

**可以看到可以了，因为咱们使用了一个新数组去赋值的
**下面咱们用计算属性来看一下

<div id="app">
    <input type="text" placeholder="请输入姓名" v-model="name" />
    <ul v-for="(item, index) in getNameList">
        <li :key="item">{{item}}---{{index}}</li>
    </ul>
    <hr />
</div>

    var vm = new Vue({
        el: "#app",
        data: {
            name: '',
            nameList: ['狮子', '大象', '老虎']
        },
        computed: {
            getNameList () {
                return this.nameList.filter(item => {return item.indexOf(this.name) > -1})
            }
        }
    })

**可以看到也是可以实现的，关键是这个getNameList这个方法，它返回的是过滤的数据心数组，对原来的数组nameList没有做任何更改，所以computed计算属性是不能修改data里面的数据的