VUE03

最新推荐文章于 2024-05-31 14:52:35 发布

cxuyuanLch

最新推荐文章于 2024-05-31 14:52:35 发布

阅读量442

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/cxuyuanlch/article/details/124942608

版权

1.跟keep-alive相关的生命周期是那些？描述一下

activated和deactivated

keep-alive的生命周期
1.activated：页面第一次进入的时候，
钩子触发的顺序是created->mounted->activated

2.deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated.

2.Vue2.0兼容IE哪一个版本以上？

在 Vue2.0 中完全兼容IE 10 以上,部分兼容IE 9,不支持 IE 8及一下版本,
因为 Vue 的响应式原理是基于es5的Object.defineProperty的，而这个方法不支持 ie 8及以下的。

3.使用Vue开发一个todo小应用，谈下你的思路？

任务计划列表即TODO列表。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="index.css">
    <script src="./vue.js"></script>
</head>
<body>
<div class="page-top">
    <div class="page-content">
        <h2>任务计划列表</h2>
    </div>
</div>
<div class="main">
    <h3 class="big-title">添加任务：</h3>
    <input
            placeholder="例如：吃饭睡觉打屁；    提示：+回车即可添加任务"
            class="task-input"
            type="text"
           v-on:keyup.enter="enterFn"
            v-model="todo"
    />
    <ul class="task-count">
        <li>{{unComplete}}个任务未完成</li>
        <li class="action">
            <a :class="{active:visibility!=='unCompleted'&&visibility!=='completed'}" href="#all">所有任务</a>
            <a :class="{active:visibility==='unCompleted'}" href="#unCompleted">未完成的任务</a>
            <a :class="{active:visibility==='completed'}" href="#completed">完成的任务</a>
        </li>
    </ul>
    <h3 class="big-title">任务列表：</h3>
    <div class="tasks">
 
        <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
        <ul class="todo-list" v-show="list.length">
            <li class="todo"
                v-for="item in filterData"
                v-bind:class="{completed:item.isComplete,editing:item===edtorTodos}"
            >
                <div class="view">
                    <input class="toggle"
                           type="checkbox"
                           v-model="item.isComplete"
                    />
                    <label @dblclick="edtorTodo(item)">{{item.title}}</label>
                    <button
                            class="destroy"
                            @click="delFn(item)"
                    ></button>
                </div>
                <input
                        class="edit"
                        type="text"
                        v-focus="edtorTodos===item"
                        v-model="item.title"
                        @blur="edtoEnd(item)"
                        @keyup.enter="edtoEnd(item)"
                        @keyup.esc="cancelEdit(item)"
                />
            </li>
        </ul>
    </div>
</div>
<script src="./todo.js"></script>
</body>
</html>

//存取localStorage中的数据
var store = {
    save(key,value){
        window.localStorage.setItem(key,JSON.stringify(value));
    },
    fetch(key){
     return JSON.parse(window.localStorage.getItem(key))||[];
    }
}
//list取出所有的值
var list = store.fetch("storeData");
 
var vm = new Vue({
    el:".main",
    data:{
        list,
        todo:'',
        edtorTodos:'',//记录正在编辑的数据,
        beforeTitle:"",//记录正在编辑的数据的title
        visibility:"all"//通过这个属性值的变化对数据进行筛选
    },
    watch:{
        //下面的这种方法是浅监控
      /*list:function(){//监控list这个属性，当这个属性对应的值发生变化就会执行函数
          store.save("storeData",this.list);
      }*/
      //下面的是深度监控
        list:{
            handler:function(){
                store.save("storeData",this.list);
            },
            deep:true
        }
 
    },
    methods:{
        enterFn(ev){//添加任务
            //向list中添加一项任务
            //事件处理函数中的this指向的是当前这个根实例
            if(this.todo==""){return;}
                this.list.push({
                    title:this.todo,
                    isComplete:false
                });
                this.todo = "";
        },
        delFn(item){//删除任务
            var index = this.list.indexOf(item);
            this.list.splice(index,1)
        },
        edtorTodo(item){//编辑任务
            //编辑任务的时候记录编辑之前的值
            this.beforeTitle = item.title;
            this.edtorTodos = item;
        },
        edtoEnd(item){//编辑完成
            this.edtorTodos="";
            // this.cancelEdit = this.edtorTodos;
        },
        cancelEdit(item){//取消编辑
            item.title = this.beforeTitle;
            this.beforeTitle = '';
            this.edtorTodos='';
        }
    },
    directives:{
        "focus":{
            update(el,binding){
                if(binding.value){
                    el.focus();
                }
            }
        }
    },
    computed:{
        unComplete(){
        return  this.list.filter(item=>{
                return !item.isComplete
            }).length
        },
        filterData(){
            //过滤的时候有三种情况 all completed unCompleted
            var filter = {
                all:function(list){
                    return list;
                },
                completed:function(list){
                    return list.filter(item=>{
                        return item.isComplete;
                    })
                },
                unCompleted:function(list){
                    return list.filter(item=>{
                        return !item.isComplete;
                    })
                }
            }
            //如果找到了过滤函数，就返回过滤后的数据，如果没有找到就返回所有的数据
            return filter[this.visibility]?filter[this.visibility](list):list;
        }
 
    }
});
function hashFn(){
    var hash = window.location.hash.slice(1);
    vm.visibility = hash;
}
hashFn();

body{margin:0;background-color:#fafafa;font:14px 'Helvetica Neue',Helvetica,Arial,sans-serif}h2{margin:0;font-size:12px}a{color:#000;text-decoration:none}input{outline:0}button{margin:0;padding:0;border:0;background:0;font-size:100%;vertical-align:baseline;font-family:inherit;font-weight:inherit;color:inherit;outline:0}ul{padding:0;margin:0;list-style:none}.page-top{width:100%;height:40px;background-color:#db4c3f}.page-content{width:50%;margin:0 auto}.page-content h2{line-height:40px;font-size:18px;color:#fff}.main{width:50%;margin:0 auto;box-sizing:border-box}.task-input{width:99%;height:30px;outline:0;border:1px solid #ccc}.task-count{display:flex;margin:10px 0}.task-count li{padding-left:10px;flex:1;color:#dd4b39}.task-count li:nth-child(1){padding:5px 0 0 10px}.action{text-align:center;display:flex}.action a{margin:0 10px;flex:1;padding:5px 0;color:#777}.action a:nth-child(3){margin-right:0}.active{border:1px solid rgba(175,47,47,0.2)}.tasks{background-color:#fff}.no-task-tip{padding:10px 0 10px 10px;display:block;border-bottom:1px solid #ededed;color:#777}.big-title{color:#222}.todo-list{margin:0;padding:0;list-style:none}.todo-list li{position:relative;font-size:16px;border-bottom:1px solid #ededed}.todo-list li:hover{background-color:#fafafa}.todo-list li.editing{border-bottom:0;padding:0}.todo-list li.editing .edit{display:block;width:506px;padding:13px 17px 12px 17px;margin:0 0 0 43px}.todo-list li.editing .view{display:none}.todo-list li .toggle{text-align:center;width:40px;height:auto;position:absolute;top:5px;bottom:0;margin:auto 0;border:0;-webkit-appearance:none;appearance:none}.toggle{text-align:center;width:40px;height:auto;position:absolute;top:5px;bottom:0;margin:auto 0;border:0;-webkit-appearance:none;appearance:none}.toggle:after{content:url('data:image/svg+xml;utf8,<svgxmlns="http://www.w3.org/2000/svg"width="40"height="40"viewBox="-10-18100135"><circlecx="50"cy="50"r="40"fill="none"stroke="#ededed"stroke-width="3"/></svg>')}.toggle:checked:after{content:url('data:image/svg+xml;utf8,<svgxmlns="http://www.w3.org/2000/svg"width="40"height="40"viewBox="-10-18100135"><circlecx="50"cy="50"r="40"fill="none"stroke="#bddad5"stroke-width="3"/><pathfill="#5dc2af"d="M7225L42712756l-44202034-52z"/></svg>')}.todo-list li label{white-space:pre-line;word-break:break-all;padding:15px 60px 15px 15px;margin-left:45px;display:block;line-height:1.2;transition:color .4s}.todo-list li.completed label{color:#d9d9d9;text-decoration:line-through}.todo-list li .destroy{display:none;position:absolute;top:0;right:10px;bottom:0;width:40px;height:40px;margin:auto 0;font-size:30px;color:#cc9a9a;margin-bottom:11px;transition:color .2s ease-out}.todo-list li .destroy:hover{color:#af5b5e}.todo-list li .destroy:after{content:'×'}.todo-list li:hover .destroy{display:block}.todo-list li .edit{display:none}.todo-list li.editing:last-child{margin-bottom:-1px}
————————————————

4.Vue中key的原理？说说你对他的理解。

开始之前，我们先还原两个实际工作场景

当我们在使用v-for时，需要给单元加上key

<ul>
    <li v-for="item in items" :key="item.id">...</li>
</ul>

用+new Date()生成的时间戳作为key，手动强制触发重新渲染

<Comp :key="+new Date()" />

那么这背后的逻辑是什么，key的作用又是什么？

一句话来讲

key是给每一个vnode的唯一id，也是diff的一种优化策略，可以根据key，更准确，更快的找到对应的vnode节点

当我们在使用v-for时，需要给单元加上key

如果不用key，Vue会采用就地复地原则：最小化element的移动，并且会尝试尽最大程度在同适当的地方对相同类型的element，做patch或者reuse。

如果使用了key，Vue会根据keys的顺序记录element，曾经拥有了key的element如果不再出现的话，会被直接remove或者destoryed

用+new Date()生成的时间戳作为key，手动强制触发重新渲染

当拥有新值的rerender作为key时，拥有了新key的Comp出现了，那么旧key Comp会被移除，新key Comp触发渲染。

举个例子，2秒后往items数组插入数据

<body>
  <div id="demo">
    <p v-for="item in items" :key="item">{{item}}</p>
  </div>
  <script src="../../dist/vue.js"></script>
  <script>
    // 创建实例
    const app = new Vue({
      el: '#demo',
      data: { items: ['a', 'b', 'c', 'd', 'e'] },
      mounted () {
        setTimeout(() => { 
          this.items.splice(2, 0, 'f')  // 
       }, 2000);
     },
   });
  </script>
</body>

不用key：

分析下整体流程：

比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较C，F，相同类型的节点，进行patch，数据不同，发生dom操作
比较D，C，相同类型的节点，进行patch，数据不同，发生dom操作
比较E，D，相同类型的节点，进行patch，数据不同，发生dom操作
循环结束，将E插入到DOM中
一共发生了3次更新，1次插入操作

在使用key的情况：vue会进行这样的操作：

比较A，A，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较B，B，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较C，F，不相同类型的节点
比较E、E，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较D、D，相同类型的节点，进行patch，但数据相同，不发生dom操作
比较C、C，相同类型的节点，进行patch，但数据相同，不发生dom操作
循环结束，将F插入到C之前
一共发生了0次更新，1次插入操作

通过上面两个小例子，可见设置key能够大大减少对页面的DOM操作，提高了diff效率

但是设置key值一定能提高diff效率吗？
其实不然，文档中也明确表示

当 Vue.js 用 v-for 正在更新已渲染过的元素列表时，它默认用“就地复用”策略。如果数据项的顺序被改变，Vue 将不会移动 DOM 元素来匹配数据项的顺序，而是简单复用此处每个元素，并且确保它在特定索引下显示已被渲染过的每个元素

这个默认的模式是高效的，但是只适用于不依赖子组件状态或临时 DOM 状态 (例如：表单输入值) 的列表渲染输出

建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

5.Vue中怎么重置data？

使用Object.assign()，vm. $d a t a 可以获取当前状态下的 d a t a ， v m .$ options.data可以获取到组件初始化状态下的data，具体可以看vm.$options。

Object.assign(this. $d a t a, t h i s .$ options.data())
Object.assign（）方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象

this.$data获取当前状态下的data

this.$options.data()获取该组件初始状态下的data。

bject.assign(this. $d a t a, t h i s .$ options.data())

初始状态下设置data数据的默认值，重置时直接bject.assign(this. $d a t a, t h i s .$ options.data())

说明：
this. $d a t a 获取当前状态下的 d a t a t h i s .$ options.data()获取该组件初始状态下的data(即初始默认值)
如果只想修改data的某个属性值，可以this[属性名] = this. $o p t i o n s . d a t a () [属性名] ，如 t h i s . m e s s a g e = t h i s .$ options.data().message。

cxuyuanLch

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
VUE03

1.跟keep-alive相关的生命周期是那些？描述一下activated和deactivatedkeep-alive的生命周期1.activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated2.deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated.2.Vue2.0兼容IE哪一个版本以上？在 Vue2.0 中完全兼容IE 10 以上,部分兼容IE 9,不支持
复制链接

扫一扫